import type { Meta, StoryObj } from '@storybook/react'
import { createSizeDecorator } from '../../utils/decorators'
import { Button } from '../Button/Button'
import {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardDescription,
  CardContent,
  CardAction,
} from './Card'

const meta = {
  title: 'Blocks/Card',
  component: Card,
  decorators: [createSizeDecorator('XS')],
  argTypes: {
    className: {
      control: 'text',
      description: 'Additional CSS classes for custom styling',
    },
    children: {
      control: false,
      description: 'Card content and sub-components',
    },
  },
} satisfies Meta<typeof Card>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (_args) => (
    <Card className="w-[400px]">
      <CardHeader>
        <CardTitle>Default Card</CardTitle>
        <CardDescription>
          This is a description for the default card, which includes an action.
        </CardDescription>
        <CardAction>
          <Button variant="secondary">Action</Button>
        </CardAction>
      </CardHeader>
      <CardContent>This is some content inside the card.</CardContent>
      <CardFooter>
        <Button>Click Me</Button>
        <Button variant="secondary">Cancel</Button>
      </CardFooter>
    </Card>
  ),
}

export const NoFooter: Story = {
  render: (_args) => (
    <Card>
      <CardHeader>
        <CardTitle>Card Without Footer</CardTitle>
        <CardDescription>This card does not have a footer.</CardDescription>
      </CardHeader>
      <CardContent>
        Sometimes, cards do not need footers. This is an example of such a card.
      </CardContent>
    </Card>
  ),
}

export const NoAction: Story = {
  render: (_args) => (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card Description</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card Content</p>
      </CardContent>
      <CardFooter>
        <p>Card Footer</p>
      </CardFooter>
    </Card>
  ),
}

export const ContainerOnly: Story = {
  render: (_args) => (
    <Card className="flex flex-col gap-4 p-6">
      <p>Put here anything you want</p>
      <p>This card demonstrates using Card as a simple container.</p>
    </Card>
  ),
}

export const InteractiveCard: Story = {
  render: (_args) => (
    <Card className="cursor-pointer transition-shadow duration-300 hover:shadow-lg">
      <CardHeader>
        <CardTitle>Interactive Card</CardTitle>
        <CardDescription>
          Hover over this card to see the effect.
        </CardDescription>
      </CardHeader>
      <CardContent>
        This card demonstrates interactivity using hover styles.
      </CardContent>
      <CardFooter>
        <Button>Click Me</Button>
      </CardFooter>
    </Card>
  ),
  parameters: {
    docs: {
      description: {
        story:
          'Use hover or focus styling only when the entire card behaves as one interactive target.',
      },
    },
  },
}

export const WithCustomStyling: Story = {
  render: (_args) => (
    <Card className="border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50">
      <CardHeader>
        <CardTitle className="text-blue-900">Custom Styled Card</CardTitle>
        <CardDescription className="text-blue-700">
          This card demonstrates custom styling with background gradients.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-blue-800">Content with custom text colors.</p>
      </CardContent>
    </Card>
  ),
}

export const MinimalCard: Story = {
  render: (_args) => (
    <Card className="p-4">
      <CardContent>
        <p>A minimal card with just content and basic padding.</p>
      </CardContent>
    </Card>
  ),
}