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

import {
  Card as NychCard,
  CardHeader as NychCardHeader,
  CardTitle as NychCardTitle,
  CardDescription as NychCardDescription,
  CardContent as NychCardContent,
  CardFooter as NychCardFooter,
  Button as NychButton,
  Badge as NychBadge,
} from '@nychthemeron/library'

const meta = {
  title: 'Components/Card',
  component: NychCard,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
} satisfies Meta<typeof NychCard>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: () => ({
    components: { NychCard, NychCardHeader, NychCardTitle, NychCardDescription, NychCardContent },
    template: `
      <NychCard style="width: 22rem;">
        <NychCardHeader>
          <NychCardTitle>Elysium</NychCardTitle>
          <NychCardDescription>The blessed fields</NychCardDescription>
        </NychCardHeader>
        <NychCardContent>
          A resting place reserved for the heroic and the virtuous, where the
          air is mild and the laurel never wilts.
        </NychCardContent>
      </NychCard>
    `,
  }),
}

export const WithFooter: Story = {
  render: () => ({
    components: {
      NychCard,
      NychCardHeader,
      NychCardTitle,
      NychCardDescription,
      NychCardContent,
      NychCardFooter,
      NychButton,
    },
    template: `
      <NychCard style="width: 22rem;">
        <NychCardHeader>
          <NychCardTitle>Passage of the Styx</NychCardTitle>
          <NychCardDescription>One obol required</NychCardDescription>
        </NychCardHeader>
        <NychCardContent>
          Charon ferries the souls of the dead across the river that divides
          the world of the living from the world of the dead.
        </NychCardContent>
        <NychCardFooter>
          <NychButton>Pay the toll</NychButton>
          <NychButton variant="secondary">Turn back</NychButton>
        </NychCardFooter>
      </NychCard>
    `,
  }),
}

export const WithHeaderAndTag: Story = {
  render: () => ({
    components: { NychCard, NychCardHeader, NychCardTitle, NychCardContent, NychBadge },
    template: `
      <NychCard style="width: 22rem;">
        <div style="height: 120px; background: linear-gradient(135deg, var(--surface-2), var(--surface-3));"></div>
        <NychCardHeader>
          <NychCardTitle style="display: flex; align-items: center; gap: 0.5rem;">
            Oracle of Delphi <NychBadge variant="info">Sacred</NychBadge>
          </NychCardTitle>
        </NychCardHeader>
        <NychCardContent>
          Seekers travelled from across the Aegean to hear the Pythia speak the
          will of Apollo in riddling verse.
        </NychCardContent>
      </NychCard>
    `,
  }),
}