import { Button, Card, Badge, Input } from '@effigenix/ui';

export function App() {
  return (
    <div className="min-h-screen p-8">
      <div className="mx-auto max-w-3xl space-y-8">
        <h1 className="text-3xl font-bold text-brand-700">Effigenix ERP</h1>

        <Card>
          <h2 className="mb-4 text-lg font-semibold">Buttons</h2>
          <div className="flex flex-wrap gap-3">
            <Button variant="primary">Primary</Button>
            <Button variant="secondary">Secondary</Button>
            <Button variant="ghost">Ghost</Button>
            <Button variant="danger">Danger</Button>
            <Button variant="primary" disabled>
              Disabled
            </Button>
          </div>
        </Card>

        <Card>
          <h2 className="mb-4 text-lg font-semibold">Badges</h2>
          <div className="flex flex-wrap gap-3">
            <Badge variant="success">Aktiv</Badge>
            <Badge variant="warning">Ausstehend</Badge>
            <Badge variant="danger">Fehler</Badge>
            <Badge variant="info">Info</Badge>
            <Badge variant="neutral">Neutral</Badge>
          </div>
        </Card>

        <Card>
          <h2 className="mb-4 text-lg font-semibold">Input</h2>
          <div className="max-w-sm space-y-3">
            <Input placeholder="Artikelbezeichnung..." />
            <Input placeholder="Disabled" disabled />
          </div>
        </Card>
      </div>
    </div>
  );
}
