import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "./Card";
import { Button } from "./Button";

const meta = {
  title: "UI/Card",
  component: Card,
  parameters: {
    layout: "centered",
    docs: {
      description: {
        component: "A flexible card component with header, content, and footer sections.",
      },
    },
  },
  tags: ["autodocs"],
  argTypes: {
    variant: {
      control: { type: "select" },
      options: ["default", "ghost"],
      description: "Visual style variant of the card",
    },
    hover: {
      control: { type: "boolean" },
      description: "Enable hover effects",
    },
    clickable: {
      control: { type: "boolean" },
      description: "Make card clickable with pointer cursor",
    },
  },
  args: { 
    onClick: fn(),
  },
} satisfies Meta<typeof Card>;

export default meta;
type Story = StoryObj<typeof meta>;export const Default: Story = {
  render: () => (
    <Card>
      <CardContent>
        <p>This is a simple card with just content.</p>
      </CardContent>
    </Card>
  ),
};

export const WithHeader: Story = {
  render: () => (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
      </CardHeader>
      <CardContent>
        <p>This card has a header with a title and some content below.</p>
      </CardContent>
    </Card>
  ),
};

export const Complete: Story = {
  render: () => (
    <Card>
      <CardHeader>
        <CardTitle>Complete Card</CardTitle>
      </CardHeader>
      <CardContent>
        <p>This is a complete card with header, content, and footer sections.</p>
        <p>It demonstrates all the available card components working together.</p>
      </CardContent>
      <CardFooter>
        <Button variant="primary">Action</Button>
        <Button variant="outline">Cancel</Button>
      </CardFooter>
    </Card>
  ),
};

export const Clickable: Story = {
  render: () => (
    <Card clickable hover onClick={() => alert("Card clicked!")}>
      <CardContent>
        <p>This card is clickable and has hover effects. Try clicking it!</p>
      </CardContent>
    </Card>
  ),
};

export const Ghost: Story = {
  render: () => (
    <Card variant="ghost">
      <CardContent>
        <p>This is a ghost variant card with minimal styling.</p>
      </CardContent>
    </Card>
  ),
};