import { useState } from "react"
import { TagSelector } from "@/components/ui/tag-selector"

interface Tag {
  id: string
  label: string
}

function TagSelectorDefault() {
  const availableTags: Tag[] = [
    { id: "1", label: "React" },
    { id: "2", label: "TypeScript" },
    { id: "3", label: "JavaScript" },
    { id: "4", label: "Next.js" },
  ]

  const [selectedTags, setSelectedTags] = useState<Tag[]>([])

  return (
    <TagSelector
      className="max-w-[400px]"
      availableTags={availableTags}
      selectedTags={selectedTags}
      onChange={setSelectedTags}
      getValue={(tag) => tag.id}
      getLabel={(tag) => tag.label}
      createTag={(label) => ({ id: crypto.randomUUID(), label })}
    />
  )
}

function TagSelectorWithPreselected() {
  const availableTags: Tag[] = [
    { id: "1", label: "React" },
    { id: "2", label: "TypeScript" },
    { id: "3", label: "JavaScript" },
    { id: "4", label: "Next.js" },
  ]

  const [selectedTags, setSelectedTags] = useState<Tag[]>([
    availableTags[0],
    availableTags[1],
  ])

  return (
    <TagSelector
      className="max-w-[400px]"
      availableTags={availableTags}
      selectedTags={selectedTags}
      onChange={setSelectedTags}
      getValue={(tag) => tag.id}
      getLabel={(tag) => tag.label}
      createTag={(label) => ({ id: crypto.randomUUID(), label })}
    />
  )
}

export default {
  TagSelectorDefault,
  TagSelectorWithPreselected,
}