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

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

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

export const Default: Story = {
  args: {
    icon: "rocket-2-fill",
    iconColor: "brand",
    title: "Onboarding éclair",
    description: "Créez un collaborateur, attribuez ses accès, déclenchez son premier cycle de paie en moins de 90 secondes.",
    link: { label: "Voir le workflow", href: "#" },
  },
};

export const WithGlow: Story = {
  args: { ...(Default.args as object), glowOnHover: true },
};

export const Colors: Story = {
  render: () => (
    <div className="mmg-grid mmg-grid--gap-md">
      <div className="mmg-col-4"><FeatureCard icon="rocket-2-fill"   iconColor="brand"  title="Brand"  description="Accent rose Synapse." glowOnHover /></div>
      <div className="mmg-col-4"><FeatureCard icon="shield-check-fill" iconColor="green" title="Green"  description="Sécurité, RGPD."     glowOnHover /></div>
      <div className="mmg-col-4"><FeatureCard icon="line-chart-fill"   iconColor="violet" title="Violet" description="Analytics."          glowOnHover /></div>
      <div className="mmg-col-4"><FeatureCard icon="bank-card-fill"    iconColor="blue"   title="Blue"   description="Finance."            /></div>
      <div className="mmg-col-4"><FeatureCard icon="alert-fill"        iconColor="amber"  title="Amber"  description="Alertes."            /></div>
      <div className="mmg-col-4"><FeatureCard icon="settings-3-fill"   iconColor="neutral" title="Neutral" description="Configuration."   /></div>
    </div>
  ),
};