import React from 'react';
import { Box, Typography } from '@mui/material';
import { GOLDEN_RATIO } from '../../theme/theme';
import { WidgetCard } from './WidgetCard';
import { StatSkeleton } from './SkeletonPresets';

export interface StatCardProps {
  title: string;
  value: string | number;
  icon: React.ReactNode;
  color?: string;
  trend?: { value: number; label?: string };
  isLoading?: boolean;
  onClick?: () => void;
}

/** Stat display card with golden-ratio proportioned layout. */
export const StatCard: React.FC<StatCardProps> = ({
  title,
  value,
  icon,
  color = 'primary.main',
  trend,
  isLoading = false,
  onClick,
}) => (
  <WidgetCard
    title={title}
    isLoading={isLoading}
    skeleton={<StatSkeleton />}
    onClick={onClick}
    noPadding
  >
    <Box display="flex" alignItems="center" sx={{ px: 2.5, pb: 2.5 }}>
      <Box sx={{ flex: GOLDEN_RATIO }}>
        <Typography variant="h3" fontWeight={800} sx={{ lineHeight: 1.1, letterSpacing: '-0.02em' }}>
          {value}
        </Typography>
        {trend && (
          <Box sx={{ display: 'inline-flex', alignItems: 'center', mt: 1, px: 1, py: 0.25, borderRadius: 1, bgcolor: trend.value >= 0 ? 'rgba(34,197,94,0.1)' : 'rgba(239,68,68,0.1)' }}>
            <Typography
              variant="caption"
              fontWeight={600}
              color={trend.value >= 0 ? 'success.main' : 'error.main'}
            >
              {trend.value >= 0 ? '↑' : '↓'} {Math.abs(trend.value)}%
              {trend.label && ` ${trend.label}`}
            </Typography>
          </Box>
        )}
      </Box>
      <Box sx={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
        <Box
          sx={{
            width: 52,
            height: 52,
            borderRadius: 3,
            bgcolor: `${color}12`,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color,
          }}
        >
          {icon}
        </Box>
      </Box>
    </Box>
  </WidgetCard>
);
