import type { Meta, StoryObj } from "@storybook/react-vite";

import { PricingCard } from "./pricing-card";

const meta = {
  title: "UI Library/PricingCard",
  component: PricingCard,
  tags: ["autodocs"],
} satisfies Meta<typeof PricingCard>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    plan: "Pro",
    price: "$29",
    description: "For growing teams that need more power.",
    features: ["Unlimited projects", "Priority support", "Advanced analytics", "Custom domains"],
    featured: false,
  },
};

export const Featured: Story = {
  args: {
    ...Default.args,
    featured: true,
  },
};

export const Tiers: Story = {
  args: { plan: "Pro", price: "$29", features: [] },
  render: () => (
    <div className="grid w-full max-w-4xl grid-cols-1 gap-6 sm:grid-cols-3">
      <PricingCard
        plan="Starter"
        price="$0"
        description="For side projects."
        features={["1 project", "Community support", "1 GB storage"]}
        cta="Start free"
      />
      <PricingCard
        plan="Pro"
        price="$29"
        description="For growing teams."
        features={["Unlimited projects", "Priority support", "Analytics"]}
        featured
      />
      <PricingCard
        plan="Enterprise"
        price="$99"
        description="For large orgs."
        features={["SSO + SAML", "Dedicated support", "SLA", "Audit logs"]}
        cta="Contact sales"
      />
    </div>
  ),
};