import React from 'react';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from './ui/card';
import { Badge } from './ui/badge';
import { TrendingUp, Minus } from 'lucide-react';

interface KPICardProps {
  kpi: any;
  color: string;
}

export const KPICard: React.FC<KPICardProps> = ({ kpi, color }) => {
  const getStatusVariant = () => {
    switch (kpi.status) {
      case 'good':
        return 'success';
      case 'warning':
        return 'warning';
      case 'critical':
        return 'destructive';
      default:
        return 'default';
    }
  };

  const getStatusLabel = () => {
    switch (kpi.status) {
      case 'good':
        return 'Bon';
      case 'warning':
        return 'Attention';
      case 'critical':
        return 'Critique';
      default:
        return 'N/A';
    }
  };

  const getTrendIcon = () => {
    if (!kpi.latest) return <Minus className="h-4 w-4" />;
    return <TrendingUp className="h-4 w-4" />;
  };

  return (
    <Card className="border-l-4 hover:shadow-md transition-shadow" style={{ borderLeftColor: color }}>
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between">
          <CardTitle className="text-base font-semibold" style={{ color }}>
            {kpi.name}
          </CardTitle>
          <div className="text-muted-foreground">
            {getTrendIcon()}
          </div>
        </div>
      </CardHeader>

      <CardContent className="pb-3">
        <div className="flex items-baseline gap-2">
          <div className="text-3xl font-bold">{kpi.value}</div>
          <div className="text-sm text-muted-foreground">{kpi.unit}</div>
        </div>
        <p className="text-xs text-muted-foreground mt-2 line-clamp-2">
          {kpi.description}
        </p>
      </CardContent>

      <CardFooter className="flex items-center justify-between pt-0">
        <Badge variant={getStatusVariant()}>
          {getStatusLabel()}
        </Badge>
        {kpi.target && (
          <span className="text-xs text-muted-foreground">
            Obj: {kpi.target} {kpi.unit}
          </span>
        )}
      </CardFooter>
    </Card>
  );
};
