import type { Meta, StoryObj } from '@storybook/react';
import { StatCard } from './StatCard';
import { Activity, Music, Users, DollarSign } from 'lucide-react';

const meta = {
    title: 'Components/Dashboard/StatCard',
    component: StatCard,
    tags: ['autodocs'],
    decorators: [
        (Story) => (
            <div className="w-[300px] h-[200px] p-4 bg-kodo-background">
                <Story />
            </div>
        ),
    ],
} satisfies Meta<typeof StatCard>;

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

export const Default: Story = {
    args: {
        label: 'Total Plays',
        value: '1.2M',
        icon: <Music className="w-5 h-5 text-white" />,
        trend: '+12.5',
        color: 'cyan',
        sparklineData: [40, 30, 45, 50, 60, 75, 80],
    },
};

export const NegativeTrend: Story = {
    args: {
        label: 'Revenue',
        value: '$432.50',
        icon: <DollarSign className="w-5 h-5 text-white" />,
        trend: '-5.2',
        color: 'red',
        sparklineData: [80, 75, 70, 65, 60, 55, 50],
    },
};

export const NoTrend: Story = {
    args: {
        label: 'Followers',
        value: '5,432',
        icon: <Users className="w-5 h-5 text-white" />,
        color: 'magenta',
        sparklineData: [10, 20, 15, 25, 30, 40, 50],
    },
};