import type { Meta, StoryObj } from "@storybook/vue3-vite"
import InfoCard from "./InfoCard.vue"
import { componentDoc } from "@/lib/storybook"

const sampleItem = {
  user: {
    name: "Stephen Peek",
    email: "peek@gramercytech.com",
    role: "Product Lead",
  },
}

const meta = {
  title: "Cards/InfoCard",
  component: InfoCard,
  tags: ["autodocs"],
  parameters: componentDoc("InfoCard", { barrel: "cards" }),
  args: {
    fields: [
      { label: "Name", value: "user.name" },
      { label: "Email", value: "user.email" },
      { label: "Role", value: "user.role" },
    ],
    showCard: true,
    item: sampleItem,
  },
} satisfies Meta<typeof InfoCard>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {},
}

export const WithTitle: Story = {
  args: {
    title: "Account summary",
    subtitle: "Profile details",
    icon: "user",
  },
}

export const WithoutChrome: Story = {
  args: {
    title: "No chrome",
    showCard: false,
  },
}

export const Showcase: Story = {
  args: {
    title: "Showcase",
    subtitle: "Formatted fields with prepend/append",
    icon: "info",
    fields: [
      { label: "Name", value: "user.name", icon: "user" },
      { label: "Email", value: "user.email", icon: "mail" },
      {
        label: "Balance",
        value: "balance",
        prepend: "$",
        append: " USD",
      },
      { label: "Sessions", value: "sessions", append: " active" },
    ],
    item: {
      ...sampleItem,
      balance: 1240.5,
      sessions: 3,
    },
  },
}
