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

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

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

export const Default: Story = {
  args: { label: "MRR", value: "84 320 €", delta: "+12.4%", trend: "up", period: "vs M-1", icon: "money-euro-circle-line" },
};

export const TrendDown: Story = {
  args: { label: "Tickets ouverts", value: "32", delta: "-18%", trend: "down", invertTrend: true, period: "cette semaine", icon: "error-warning-line" },
};

export const Flat: Story = {
  args: { label: "NPS", value: "62", delta: "0", trend: "flat", period: "stable", icon: "star-line" },
};

export const WithSparkline: Story = {
  args: {
    label: "Sessions",
    value: "12 480",
    delta: "+8.2%",
    trend: "up",
    period: "30 derniers jours",
    icon: "line-chart-line",
    sparkline: <Sparkline data={[20, 28, 25, 32, 30, 38, 42, 48]} width={200} height={48} />,
  },
};

export const Grid: Story = {
  render: () => (
    <div className="mmg-grid mmg-grid--gap-md">
      <div className="mmg-col-3"><MetricCard label="MRR" value="84 320 €" delta="+12.4%" trend="up" icon="money-euro-circle-line" /></div>
      <div className="mmg-col-3"><MetricCard label="Churn" value="2.3%" delta="+0.4 pts" trend="up" invertTrend icon="arrow-go-back-line" /></div>
      <div className="mmg-col-3"><MetricCard label="NPS" value="62" delta="+4 pts" trend="up" icon="star-line" /></div>
      <div className="mmg-col-3"><MetricCard label="Tickets" value="32" delta="-18%" trend="down" invertTrend icon="error-warning-line" /></div>
    </div>
  ),
};