'use client';

import { Button } from '@/components/ui/Button';

export function ButtonsSection() {
  return (
    <section id="buttons" className="space-y-8">
      <h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
        Buttons
      </h2>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <div className="space-y-6">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Variants
          </h3>
          <div className="space-y-4 space-x-4">
            <Button variant="primary">Primary Button</Button>
            <Button variant="secondary">Secondary Button</Button>
            <Button variant="ghost">Ghost Button</Button>
            <Button variant="destructive">Destructive Button</Button>
            <Button variant="success">Success Button</Button>
            <Button variant="selected">Selected Button</Button>
          </div>
        </div>

        <div className="space-y-6">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Sizes
          </h3>
          <div className="space-y-4 space-x-4">
            <Button size="sm">Small Button</Button>
            <Button size="md">Medium Button</Button>
            <Button size="lg">Large Button</Button>
          </div>
        </div>

        <div className="space-y-6">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            States
          </h3>
          <div className="space-y-4 space-x-4">
            <Button>Normal State</Button>
            <Button disabled>Disabled State</Button>
            <Button className="opacity-50">Loading State</Button>
          </div>
        </div>
      </div>
    </section>
  );
}
