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

import { FeatureCard } from "./feature-card";

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

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

export const Default: Story = {
  args: {
    icon: Zap,
    title: "Blazing fast",
    description:
      "Vite + SWC give you instant HMR and sub-second cold starts out of the box.",
  },
};

export const Grid: Story = {
  args: { icon: Zap, title: "Blazing fast", description: "..." },
  render: () => (
    <div className="grid w-full max-w-4xl grid-cols-1 gap-4 sm:grid-cols-3">
      <FeatureCard
        icon={Zap}
        title="Blazing fast"
        description="Instant HMR and sub-second cold starts out of the box."
      />
      <FeatureCard
        icon={ShieldCheck}
        title="Type safe"
        description="End-to-end TypeScript with strict mode enabled by default."
      />
      <FeatureCard
        icon={Sparkles}
        title="Themeable"
        description="Swap the whole look with a single data-theme attribute."
      />
    </div>
  ),
};