Button

import { Button } from "@/components/ui/button";

const PlusIcon = () => (
  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
  </svg>
)

const ArrowIcon = () => (
  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
  </svg>
)

export default function ButtonDemo() {
  return (
    <div className="flex flex-col gap-8 p-6">
      {/* Colors */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Colors (Solid)</h3>
        <div className="flex flex-wrap gap-3">
          <Button color="default">Default</Button>
          <Button color="primary">Primary</Button>
          <Button color="secondary">Secondary</Button>
          <Button color="success">Success</Button>
          <Button color="warning">Warning</Button>
          <Button color="danger">Danger</Button>
        </div>
      </div>

      {/* Variants */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Variants</h3>
        <div className="flex flex-wrap gap-3">
          <Button variant="solid" color="primary">Solid</Button>
          <Button variant="bordered" color="primary">Bordered</Button>
          <Button variant="flat" color="primary">Flat</Button>
          <Button variant="light" color="primary">Light</Button>
          <Button variant="ghost" color="primary">Ghost</Button>
        </div>
      </div>

      {/* Sizes */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Sizes</h3>
        <div className="flex items-center gap-3">
          <Button size="sm">Small</Button>
          <Button size="md">Medium</Button>
          <Button size="lg">Large</Button>
          <Button size="icon"><PlusIcon /></Button>
        </div>
      </div>

      {/* With Icons */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">With Icons</h3>
        <div className="flex flex-wrap gap-3">
          <Button startContent={<PlusIcon />}>Add Item</Button>
          <Button endContent={<ArrowIcon />}>Continue</Button>
          <Button color="success" startContent={<PlusIcon />} endContent={<ArrowIcon />}>
            Both
          </Button>
        </div>
      </div>

      {/* States */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">States</h3>
        <div className="flex flex-wrap gap-3">
          <Button isLoading>Loading</Button>
          <Button disabled>Disabled</Button>
          <Button isLoading color="success">Saving...</Button>
        </div>
      </div>

      {/* Bordered Colors */}
      <div className="space-y-3">
        <h3 className="text-sm font-medium text-zinc-500">Bordered Variants</h3>
        <div className="flex flex-wrap gap-3">
          <Button variant="bordered" color="primary">Primary</Button>
          <Button variant="bordered" color="secondary">Secondary</Button>
          <Button variant="bordered" color="success">Success</Button>
          <Button variant="bordered" color="danger">Danger</Button>
        </div>
      </div>
    </div>
  )
}