import { PlusIcon } from "lucide-react"

import { ButtonGroup, ButtonGroupItem } from "@/components/ui/button-group"

export function ButtonGroupDemo() {
  return (
    <div className="grid gap-6">
      <ButtonGroup aria-label="Button group">
        {Array.from({ length: 7 }).map((_, index) => (
          <ButtonGroupItem
            key={index}
            aria-pressed={index === 3 || undefined}
          >
            <PlusIcon data-icon="inline-start" />
            Button
            <PlusIcon data-icon="inline-end" />
          </ButtonGroupItem>
        ))}
      </ButtonGroup>

      <ButtonGroup aria-label="Small icon button group" size="sm" mode="iconOnly">
        {Array.from({ length: 7 }).map((_, index) => (
          <ButtonGroupItem key={index} aria-label={`Action ${index + 1}`}>
            <PlusIcon />
          </ButtonGroupItem>
        ))}
      </ButtonGroup>

      <div dir="rtl">
        <ButtonGroup aria-label="Arabic button group" size="xs">
          {Array.from({ length: 7 }).map((_, index) => (
            <ButtonGroupItem key={index} disabled={index === 4}>
              <PlusIcon data-icon="inline-start" />
              {"\u0627\u0646\u0642\u0631 \u0647\u0646\u0627"}
              <PlusIcon data-icon="inline-end" />
            </ButtonGroupItem>
          ))}
        </ButtonGroup>
      </div>
    </div>
  )
}
