import { ArrowRightIcon, PlusIcon, Trash2Icon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"

export function ButtonDemo() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-wrap items-center gap-3">
        <Button>Primary</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="soft">Soft</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="ghost-primary">Ghost Primary</Button>
        <Button variant="danger">Danger</Button>
        <Button variant="soft-danger">Soft Danger</Button>
        <Button variant="white">White</Button>
      </div>

      <div className="flex flex-wrap items-center gap-3">
        <Button size="xs">XS</Button>
        <Button size="sm">Small</Button>
        <Button>Medium</Button>
        <Button size="lg">Large</Button>
        <Button size="xl">XL</Button>
      </div>

      <div className="flex flex-wrap items-center gap-3">
        <Button size="icon-xs" aria-label="Add item">
          <PlusIcon />
        </Button>
        <Button size="icon-sm" aria-label="Add item">
          <PlusIcon />
        </Button>
        <Button size="icon" aria-label="Add item">
          <PlusIcon />
        </Button>
        <Button size="icon-lg" aria-label="Add item">
          <PlusIcon />
        </Button>
        <Button size="icon-xl" aria-label="Add item">
          <PlusIcon />
        </Button>
      </div>

      <div className="flex flex-wrap items-center gap-3">
        <Button>
          <PlusIcon data-icon="inline-start" />
          New item
        </Button>
        <Button variant="outline">
          Continue
          <ArrowRightIcon data-icon="inline-end" data-rtl-flip="true" />
        </Button>
        <Button variant="danger">
          <Trash2Icon data-icon="inline-start" />
          Delete
        </Button>
        <Button disabled aria-busy="true">
          <Spinner data-icon="inline-start" />
          Loading
        </Button>
      </div>

      <div dir="rtl" className="flex flex-wrap items-center gap-3">
        <Button>إرسال</Button>
        <Button variant="outline">
          متابعة
          <ArrowRightIcon data-icon="inline-end" data-rtl-flip="true" />
        </Button>
        <Button variant="danger">
          <Trash2Icon data-icon="inline-start" />
          حذف
        </Button>
        <Button disabled aria-busy="true">
          <Spinner data-icon="inline-start" />
          جاري التحميل
        </Button>
      </div>
    </div>
  )
}
