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

import { StatCard } from "./stat-card";

const meta = {
  title: "UI Library/StatCard",
  component: StatCard,
  tags: ["autodocs"],
  argTypes: {
    delta: { control: { type: "number" } },
  },
} satisfies Meta<typeof StatCard>;

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

export const Default: Story = {
  args: {
    label: "Total revenue",
    value: "$48,120",
    delta: 12.4,
    hint: "vs last month",
    icon: DollarSign,
  },
};

export const Negative: Story = {
  args: {
    label: "Churn rate",
    value: "3.8%",
    delta: -2.1,
    hint: "vs last month",
    icon: Activity,
  },
};

export const NoDelta: Story = {
  args: {
    label: "Active users",
    value: "12,840",
    icon: Users,
  },
};

export const Grid: Story = {
  args: { label: "Total revenue", value: "$48,120", delta: 12.4, icon: DollarSign },
  render: () => (
    <div className="grid w-full max-w-3xl grid-cols-1 gap-4 sm:grid-cols-3">
      <StatCard label="Revenue" value="$48,120" delta={12.4} icon={DollarSign} />
      <StatCard label="Users" value="12,840" delta={4.2} icon={Users} />
      <StatCard label="Churn" value="3.8%" delta={-2.1} icon={Activity} />
    </div>
  ),
};