import type { Meta, StoryObj } from '@storybook/react-vite';

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from './card';
import { Button } from '../button/button';
import { Input } from '../input/input';
import { Label } from '../label/label';

const meta = {
  title: 'Components/Card',
  component: Card,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Surface that groups related content. Compose it from the parts rather than styling a bare `div`, so padding and rhythm stay consistent across the product.\n\nThe card reads as a card through a tinted fill and a hairline border, not a shadow — that is how CBAR draws it. Padding stays on the kit’s own scale: the only composition CBAR draws is a full-width page section at 36px, which is too generous for a general-purpose card.',
      },
    },
  },
  tags: ['autodocs'],
} satisfies Meta<typeof Card>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  render: () => (
    <Card className="w-80">
      <CardHeader>
        <CardTitle>Monthly report</CardTitle>
        <CardDescription>Usage across all workspaces.</CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-muted-foreground">
          You used 12,430 of 20,000 credits this month.
        </p>
      </CardContent>
    </Card>
  ),
};

/** `CardAction` moves into a second column automatically when present. */
export const WithAction: Story = {
  render: () => (
    <Card className="w-80">
      <CardHeader>
        <CardTitle>Billing</CardTitle>
        <CardDescription>You are on the Free plan.</CardDescription>
        <CardAction>
          <Button size="sm">Upgrade</Button>
        </CardAction>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-muted-foreground">Next invoice: no charge.</p>
      </CardContent>
    </Card>
  ),
};

export const WithForm: Story = {
  render: () => (
    <Card className="w-80">
      <CardHeader className="border-b">
        <CardTitle>Sign in</CardTitle>
        <CardDescription>Use your work email.</CardDescription>
      </CardHeader>
      <CardContent className="grid gap-4">
        <div className="grid gap-2">
          <Label htmlFor="card-email">Email</Label>
          <Input id="card-email" type="email" placeholder="name@example.com" />
        </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>
  ),
};