import { Tag, FilterTag, TagGroup } from "@hashti/react";

import { Tag } from "@hashti/react";

export function StaticTagsExample() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Tag color="gray">General</Tag>
      <Tag color="teal">Architecture</Tag>
      <Tag color="blue">Kubernetes</Tag>
      <Tag color="green">Healthy</Tag>
      <Tag color="red">Deprecated</Tag>
      <Tag color="purple">Enterprise</Tag>
    </div>
  );
}

import { Tag } from "@hashti/react";

export function TagSizesExample() {
  return (
    <div className="flex items-center gap-4">
      <Tag size="sm" color="blue">
        Small Tag (20px)
      </Tag>
      <Tag size="md" color="blue">
        Medium Tag (24px)
      </Tag>
    </div>
  );
}

import { Tag } from "@hashti/react";

export function TagPaletteExample() {
  const colors = [
    "gray",
    "cool-gray",
    "warm-gray",
    "blue",
    "cyan",
    "teal",
    "green",
    "red",
    "purple",
    "magenta",
  ] as const;

  return (
    <div className="flex flex-wrap gap-2">
      {colors.map((color) => (
        <Tag key={color} color={color}>
          {color}
        </Tag>
      ))}
    </div>
  );
}

import { useState } from "react";
import { TagGroup, FilterTag } from "@hashti/react";

export function FilterTagGroupExample() {
  const [filters, setFilters] = useState([
    { id: "1", name: "Status: Active" },
    { id: "2", name: "Role: Administrator" },
    { id: "3", name: "Region: Middle East" },
    { id: "4", name: "Environment: Production" },
  ]);

  const handleRemove = (keys: Set<React.Key>) => {
    setFilters((prev) => prev.filter((item) => !keys.has(item.id)));
  };

  return (
    <div className="space-y-4">
      <TagGroup label="Active Filters" items={filters} onRemove={handleRemove}>
        {(item) => <FilterTag id={item.id}>{item.name}</FilterTag>}
      </TagGroup>

      {filters.length === 0 && <p className="text-sm text-subtle">No active filters applied.</p>}
    </div>
  );
}

import { useState } from "react";
import { TagGroup, FilterTag } from "@hashti/react";
import type { Selection } from "@hashti/react";

export function SelectableTagsExample() {
  const [selected, setSelected] = useState<Selection>(new Set(["architecture"]));

  const topics = [
    { id: "architecture", label: "Architecture" },
    { id: "tokens", label: "Design Tokens" },
    { id: "accessibility", label: "Accessibility" },
    { id: "performance", label: "Performance" },
  ];

  return (
    <TagGroup
      label="Topics"
      selectionMode="multiple"
      selectedKeys={selected}
      onSelectionChange={setSelected}
      items={topics}
    >
      {(item) => <FilterTag id={item.id}>{item.label}</FilterTag>}
    </TagGroup>
  );
}