// MetricCard — client component
'use client';

import { useState } from 'react';
import { cn } from '@/lib/utils';

interface MetricCardProps {
  label: string;
  value: string | number;
  change?: string;
  trend?: 'up' | 'down' | 'flat';
  className?: string;
}

export function MetricCard({
  label, value, change, trend, className
}: MetricCardProps) {
  const [hovered, setHovered] =
    useState(false);

  return (
    <div
      className={cn(
        'rounded-lg border p-4',
        hovered && 'shadow-md',
        className
      )}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <p className="text-xs text-muted">
        {label}
      </p>
      <p className="text-2xl font-bold">
        {value}
      </p>
      {change && (
        <span className={cn(
          trend === 'up' && 'text-green-500',
          trend === 'down' && 'text-red-500'
        )}>{change}</span>
      )}
    </div>
  );
}

import { render, screen }
  from '@testing-library/react';
import userEvent
  from '@testing-library/user-event';
import { MetricCard }
  from './MetricCard';

describe('MetricCard', () => {
  it('renders label and value', () => {
    render(
      <MetricCard
        label="MRR"
        value="€42,800"
      />
    );
    expect(
      screen.getByText('MRR')
    ).toBeInTheDocument();
    expect(
      screen.getByText('€42,800')
    ).toBeInTheDocument();
  });

  it('shows change with trend', () => {
    render(
      <MetricCard
        label="MRR" value="€42,800"
        change="+12.4%" trend="up"
      />
    );
    const change =
      screen.getByText('+12.4%');
    expect(change).toHaveClass(
      'text-green-500'
    );
  });

  it('applies custom className', () => {
    render(
      <MetricCard
        label="LTV" value="€1,240"
        className="test-class"
      />
    );
    expect(
      screen.getByText('LTV')
        .closest('div')
    ).toHaveClass('test-class');
  });
});

import type { Meta, StoryObj }
  from '@storybook/react';
import { MetricCard }
  from './MetricCard';

const meta: Meta<typeof MetricCard> = {
  title: 'UI/MetricCard',
  component: MetricCard,
  tags: ['autodocs'],
  args: {
    label: 'MRR',
    value: '€42,800',
  },
};
export default meta;

type Story =
  StoryObj<typeof MetricCard>;

export const Default: Story = {};

export const Trending: Story = {
  args: {
    change: '+12.4%',
    trend: 'up',
  },
};

export const Dropping: Story = {
  args: {
    label: 'Churn',
    value: '3.2%',
    change: '+0.8%',
    trend: 'down',
  },
};

export const CAC: Story = {
  args: {
    label: 'CAC',
    value: '€184',
    change: '−€12',
    trend: 'up',
  },
};