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

import { Card as NychCard, Button as NychButton, Tag as NychTag } 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 },
    template: `
      <NychCard style="width: 22rem;">
        <template #title>Elysium</template>
        <template #subtitle>The blessed fields</template>
        <template #content>
          A resting place reserved for the heroic and the virtuous, where the
          air is mild and the laurel never wilts.
        </template>
      </NychCard>
    `,
  }),
}

export const WithFooter: Story = {
  render: () => ({
    components: { NychCard, NychButton },
    template: `
      <NychCard style="width: 22rem;">
        <template #title>Passage of the Styx</template>
        <template #subtitle>One obol required</template>
        <template #content>
          Charon ferries the souls of the dead across the river that divides
          the world of the living from the world of the dead.
        </template>
        <template #footer>
          <NychButton label="Pay the toll" />
          <NychButton label="Turn back" severity="secondary" />
        </template>
      </NychCard>
    `,
  }),
}

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