import type { Tags } from "@/api/generated/private/models/tags";

interface Props {
  tags: Tags[];
  activeTag?: number;
  onSelect: (id: number | undefined) => void;
}

export default function HubTags({ tags, activeTag, onSelect }: Props) {
  return (
    <div className="flex flex-wrap gap-2 border-b border-brand-lines/10 px-4 py-2">
      {tags.map((tag) => {
        const active = activeTag === tag.id;
        return (
          <button
            key={tag.id}
            type="button"
            onClick={() => onSelect(active ? undefined : tag.id)}
            className="rounded-full border px-3 py-0.5 text-xs font-medium transition-colors"
            style={{
              borderColor: tag.color ?? undefined,
              color: active ? "#fff" : (tag.color ?? undefined),
              backgroundColor: active ? (tag.color ?? "#6366f1") : (tag.color ?? "#6366f1") + "22",
            }}
          >
            {tag.name}
          </button>
        );
      })}
    </div>
  );
}
