import type { Meta, StoryObj } from "@storybook/react";
import { PricingCard, Button } from "@managemate/react";

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

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

const features = [
  { label: "Jusqu'à 10 collaborateurs" },
  { label: "Gestion congés" },
  { label: "Bulletins simplifiés" },
  { label: "Support email" },
  { label: "API & webhooks", included: false },
  { label: "SSO", included: false },
];

export const Default: Story = {
  args: {
    name: "Starter",
    description: "Pour les TPE qui démarrent.",
    price: "9 €",
    pricePeriod: "/utilisateur/mois",
    features,
    cta: <Button variant="tertiary" block>Démarrer l'essai</Button>,
  },
};

export const Highlighted: Story = {
  args: {
    name: "Pro",
    description: "Pour les PME en croissance.",
    price: "19 €",
    pricePeriod: "/utilisateur/mois",
    highlighted: true,
    badge: "Populaire",
    features: features.map((f) => ({ ...f, included: true })),
    cta: <Button variant="primary" block icon="arrow-right-line" iconPosition="right">Choisir Pro</Button>,
  },
};

export const Trio: Story = {
  render: () => (
    <div className="mmg-grid mmg-grid--gap-md">
      <div className="mmg-col-4"><PricingCard {...Default.args!} /></div>
      <div className="mmg-col-4"><PricingCard {...Highlighted.args!} /></div>
      <div className="mmg-col-4">
        <PricingCard
          name="Enterprise"
          description="Pour les organisations matures."
          price="Sur devis"
          features={[
            { label: "Tout Pro inclus" },
            { label: "SLA 99.95%" },
            { label: "SSO / SAML / SCIM" },
            { label: "Audit logs" },
            { label: "TAM dédié" },
          ]}
          cta={<Button variant="tertiary" block>Contacter sales</Button>}
        />
      </div>
    </div>
  ),
};