import React from 'react';
import { motion, useReducedMotion } from 'framer-motion';
import { ArrowUpRight, ArrowDownRight, LucideIcon } from 'lucide-react';
import { Card } from '@/ui/Card';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';

interface MetricCardProps {
  title: string;
  value: number | string;
  change?: number;
  icon: LucideIcon;
  suffix?: string;
  prefix?: string;
  delay?: number;
}

export function MetricCard({
  title,
  value,
  change,
  icon: Icon,
  suffix = '',
  prefix = '',
  delay = 0,
}: MetricCardProps) {
  const shouldReduceMotion = useReducedMotion();
  const isPositive = change && change > 0;
  const isNegative = change && change < 0;

  return (
    <motion.div
      initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay }}
      style={{ height: '100%' }}
    >
      <Card style={{ height: '100%', padding: '1.25rem' }}>
        <Stack gap={3}>
          <Stack direction="row" align="start" justify="between">
            <Box style={{ display: 'flex', height: '2.75rem', width: '2.75rem', alignItems: 'center', justifyContent: 'center', borderRadius: '0.75rem', backgroundColor: 'rgba(59, 130, 246, 0.1)' }}>
              <Icon style={{ width: '1.25rem', height: '1.25rem', color: '#3b82f6' }} />
            </Box>
            {change !== undefined && (
              <Stack direction="row" align="center" gap={1} style={{ fontSize: '0.875rem', fontWeight: 500, color: isPositive ? '#10b981' : isNegative ? '#ef4444' : '#9ca3af' }}>
                {isPositive ? <ArrowUpRight style={{ width: '1rem', height: '1rem' }} /> : isNegative ? <ArrowDownRight style={{ width: '1rem', height: '1rem' }} /> : null}
                <Text size="sm" weight="medium">{Math.abs(change)}%</Text>
              </Stack>
            )}
          </Stack>
          <Box>
            <Text size="2xl" weight="bold" color="text-white" style={{ marginBottom: '0.25rem', display: 'block' }}>
              {prefix}{typeof value === 'number' ? value.toLocaleString() : value}{suffix}
            </Text>
            <Text size="sm" color="text-gray-400">{title}</Text>
          </Box>
        </Stack>
      </Card>
    </motion.div>
  );
}