"use client"import { useState } from "react"import {  Tags,  TagsContent,  TagsEmpty,  TagsGroup,  TagsInput,  TagsItem,  TagsList,  TagsTrigger,  TagsValue,} from "@/components/kibo-ui/tags/index"const tags = [  { value: "design", label: "Design" },  { value: "engineering", label: "Engineering" },  { value: "marketing", label: "Marketing" },  { value: "research", label: "Research" },]export default function TagsDemo() {  const [selected, setSelected] = useState(["design", "engineering"])  const [open, setOpen] = useState(true)  const toggleTag = (value: string) => {    setSelected((current) =>      current.includes(value)        ? current.filter((tag) => tag !== value)        : [...current, value],    )  }  return (    <Tags open={open} onOpenChange={setOpen} className="w-full max-w-sm">      <TagsTrigger>        {selected.map((value) => {          const tag = tags.find((item) => item.value === value)          return (            <TagsValue key={value} onRemove={() => toggleTag(value)}>              {tag?.label}            </TagsValue>          )        })}      </TagsTrigger>      <TagsContent>        <TagsInput placeholder="Search tags..." />        <TagsList>          <TagsEmpty />          <TagsGroup>            {tags.map((tag) => (              <TagsItem key={tag.value} value={tag.value} onSelect={() => toggleTag(tag.value)}>                {tag.label}                {selected.includes(tag.value) && "✓"}              </TagsItem>            ))}          </TagsGroup>        </TagsList>      </TagsContent>    </Tags>  )}