import type { Meta, StoryObj } from "@storybook/react";
import {
    Button,
    Card,
    CardContent,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle,
} from "../src/index.js";

const meta = {
    title: "Basic/Card",
    component: Card,
    tags: ["autodocs"],
} satisfies Meta<typeof Card>;

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

export const Default: Story = {
    render: () => (
        <Card className="w-[360px]">
            <CardHeader>
                <CardTitle>卡片标题</CardTitle>
                <CardDescription>一句描述说明这个卡片的用途。</CardDescription>
            </CardHeader>
            <CardContent>
                <p className="text-sm">正文内容区域，可放表单、列表或摘要。</p>
            </CardContent>
            <CardFooter className="gap-2">
                <Button size="sm">主要操作</Button>
                <Button size="sm" variant="ghost">
                    次要操作
                </Button>
            </CardFooter>
        </Card>
    ),
};