'use client';

import { Badge } from '@/components/ui/Badge';
import { PriorityBadge } from '@/components/ui/PriorityBadge';
import { StatusBadge } from '@/components/ui/StatusBadge';

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

      <div className="space-y-6">
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Variants
          </h3>
          <div className="flex flex-wrap gap-4">
            <Badge variant="default">Default Badge</Badge>
            <Badge variant="primary">Primary Badge</Badge>
            <Badge variant="success">Success Badge</Badge>
            <Badge variant="destructive">Destructive Badge</Badge>
            <Badge variant="accent">Accent Badge</Badge>
            <Badge variant="purple">Purple Badge</Badge>
            <Badge variant="yellow">Yellow Badge</Badge>
            <Badge variant="green">Green Badge</Badge>
            <Badge variant="blue">Blue Badge</Badge>
            <Badge variant="gray">Gray Badge</Badge>
            <Badge variant="outline">Outline Badge</Badge>
            <Badge variant="danger">Danger Badge</Badge>
            <Badge variant="warning">Warning Badge</Badge>
          </div>
        </div>

        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Tailles
          </h3>
          <div className="flex flex-wrap items-center gap-4">
            <Badge size="sm">Small Badge</Badge>
            <Badge size="md">Medium Badge</Badge>
            <Badge size="lg">Large Badge</Badge>
          </div>
        </div>

        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Priority Badges
          </h3>
          <div className="flex flex-wrap gap-4">
            <PriorityBadge priority="low" />
            <PriorityBadge priority="medium" />
            <PriorityBadge priority="high" />
          </div>
        </div>

        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Status Badges
          </h3>
          <div className="flex flex-wrap gap-4">
            <StatusBadge status="todo" />
            <StatusBadge status="in_progress" />
            <StatusBadge status="done" />
            <StatusBadge status="cancelled" />
          </div>
        </div>
      </div>
    </section>
  );
}
