"use client"

import { XIcon } from "lucide-react"
import { Badge } from "@/components/reui/badge"
import { Button } from "@/components/ui/button"

export interface SliceChip {
  key: string
  label: string
}

export function SliceChips({
  chips,
  onRemove,
}: {
  chips: SliceChip[]
  onRemove: (key: string) => void
}) {
  if (!chips.length) return null
  return (
    <div className="flex flex-wrap items-center gap-1.5 border-b px-5 py-2">
      {chips.map((chip) => (
        <Badge key={chip.key} variant="outline" size="sm" className="gap-1 pr-0.5">
          {chip.label}
          <Button
            type="button"
            variant="ghost"
            size="icon-xs"
            aria-label={`Снять ${chip.label}`}
            onClick={() => onRemove(chip.key)}
          >
            <XIcon />
          </Button>
        </Badge>
      ))}
    </div>
  )
}