import { Button } from '@/components/button';
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/card';
import { Input } from '@/components/input';
import { Label } from '@/components/label';
import { Separator } from '@/components/separator';
import type { SeparatorProps } from '@/components/separator';
import { Skeleton } from '@/components/skeleton';
import { Spinner } from '@/components/spinner';
import type { Entry } from './types';

export const card: Entry = {
  slug: 'card',
  name: 'Card',
  group: 'Layout',
  description:
    'A surface with a header, body and footer. `--card` is a tinted surface in CBAR rather than white — anything CBAR draws flat white uses `--background` instead.',
  imports: { subpath: 'card', names: ['Card', 'CardHeader', 'CardTitle', 'CardContent'] },
  figma: { set: 'Card' },

  compositions: [
    {
      name: 'Full anatomy',
      render: () => (
        <Card className="w-80">
          <CardHeader>
            <CardTitle>Monthly report</CardTitle>
            <CardDescription>Generated on the first of each month.</CardDescription>
            <CardAction>
              <Button variant="ghost" size="sm">
                Export
              </Button>
            </CardAction>
          </CardHeader>
          <CardContent className="text-sm text-muted-foreground">
            1,284 requests, 99.94% availability, no incidents.
          </CardContent>
          <CardFooter>
            <Button size="sm">Open</Button>
          </CardFooter>
        </Card>
      ),
    },
    {
      name: 'With a form',
      description:
        'The header and footer take a `border` utility when the card holds a form — the rules separate the question from the answer, which a card holding prose does not need.',
      render: () => (
        <Card className="w-80">
          <CardHeader className="border-b">
            <CardTitle>Sign in</CardTitle>
            <CardDescription>Use your work e-mail.</CardDescription>
          </CardHeader>
          <CardContent className="grid gap-4">
            <div className="grid gap-2">
              <Label htmlFor="card-email">E-mail</Label>
              <Input id="card-email" type="email" placeholder="name@cbar.az" />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="card-password">Password</Label>
              <Input id="card-password" type="password" />
            </div>
          </CardContent>
          <CardFooter className="justify-end gap-2 border-t">
            <Button variant="ghost">Cancel</Button>
            <Button>Sign in</Button>
          </CardFooter>
        </Card>
      ),
    },
  ],
};

export const separator: Entry = {
  slug: 'separator',
  name: 'Separator',
  group: 'Layout',
  description:
    'A rule between groups. Decorative by default — pass `decorative={false}` when it genuinely separates two regions and should be announced.',
  imports: { subpath: 'separator', names: ['Separator'] },

  axes: { orientation: ['horizontal', 'vertical'] },
  defaults: { orientation: 'horizontal' },
  render: (props) => {
    const p = props as SeparatorProps;
    return (
      <div className={p.orientation === 'vertical' ? 'flex h-16 items-center' : 'w-40'}>
        <Separator {...p} />
      </div>
    );
  },

  matrices: [{ title: 'Orientation', rows: 'orientation' }],
};

export const skeleton: Entry = {
  slug: 'skeleton',
  name: 'Skeleton',
  group: 'Layout',
  description:
    'A placeholder for content that has not arrived. Size it with utilities — it has no size prop, because a skeleton should match the shape of what it stands in for.',
  imports: { subpath: 'skeleton', names: ['Skeleton'] },

  compositions: [
    {
      name: 'A loading row',
      render: () => (
        <div className="flex w-72 items-center gap-3">
          <Skeleton className="size-10 rounded-full" />
          <div className="flex-1 space-y-2">
            <Skeleton className="h-4 w-3/4" />
            <Skeleton className="h-4 w-1/2" />
          </div>
        </div>
      ),
    },
  ],
};

export const spinner: Entry = {
  slug: 'spinner',
  name: 'Spinner',
  group: 'Layout',
  description:
    'An indeterminate busy indicator. It carries an accessible label (default "Loading") so the state is announced, not just drawn.',
  imports: { subpath: 'spinner', names: ['Spinner'] },

  compositions: [
    {
      name: 'Sizes',
      description: 'Sized with utilities and inheriting colour from its context.',
      render: () => (
        <div className="flex items-center gap-6">
          <Spinner className="size-4" />
          <Spinner className="size-6" />
          <Spinner className="size-8 text-primary" />
          <Spinner className="size-10 text-destructive" />
        </div>
      ),
    },
    {
      name: 'Inside a button',
      render: () => (
        <Button disabled>
          <Spinner className="size-4" />
          Saving…
        </Button>
      ),
    },
  ],
};