import { Box, Card, Typography } from '@mui/material'
import { TrendingUp, TrendingDown } from 'lucide-react'
import type { SxProps, Theme } from '@mui/material'
import type { ReactNode } from 'react'

interface MetricDelta {
  value: string
  positive: boolean
}

interface MetricCardProps {
  label: string
  value: string | number
  delta?: MetricDelta
  icon?: ReactNode
  color?: string
  sx?: SxProps<Theme>
}

export function MetricCard({ label, value, delta, icon, color = '#1e3a5f', sx }: MetricCardProps) {
  return (
    <Card sx={{ p: 2.5, ...sx }}>
      <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
        <Box>
          <Typography
            sx={{ fontSize: '0.6875rem', fontWeight: 600, color: 'text.disabled', textTransform: 'uppercase', letterSpacing: '0.08em', mb: 0.5 }}
          >
            {label}
          </Typography>
          <Typography sx={{ fontSize: '1.75rem', fontWeight: 700, color, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
            {value}
          </Typography>
          {delta && (
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, mt: 0.5 }}>
              {delta.positive
                ? <TrendingUp size={12} color="#1a7a4a" />
                : <TrendingDown size={12} color="#c0392b" />}
              <Typography
                sx={{ fontSize: '0.75rem', color: delta.positive ? '#1a7a4a' : '#c0392b', fontWeight: 500 }}
              >
                {delta.value}
              </Typography>
            </Box>
          )}
        </Box>
        {icon && (
          <Box
            sx={{
              width: 40,
              height: 40,
              borderRadius: 1.5,
              bgcolor: `${color}18`,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            {icon}
          </Box>
        )}
      </Box>
    </Card>
  )
}