// components/dashboard/AgentStatsCard.jsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";

export const AgentStatsCard = ({ agent, formatDuration }) => {
  const answerRate = ((agent.answered / agent.total) * 100).toFixed(1);
  
  return (
    <Card>
      <CardHeader className="pb-2">
        <CardTitle className="text-sm font-medium">{agent.name}</CardTitle>
      </CardHeader>
      <CardContent className="space-y-2">
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Answer Rate</span>
          <span className="font-medium">{answerRate}%</span>
        </div>
        <Progress value={parseFloat(answerRate)} className="h-2" />
        
        <div className="grid grid-cols-2 gap-4 pt-2">
          <div className="space-y-1">
            <p className="text-xs text-muted-foreground">Total Calls</p>
            <p className="text-sm font-medium">{agent.total}</p>
          </div>
          <div className="space-y-1">
            <p className="text-xs text-muted-foreground">Avg Duration</p>
            <p className="text-sm font-medium">
              {formatDuration(agent.average_duration)}
            </p>
          </div>
          <div className="space-y-1">
            <p className="text-xs text-muted-foreground">Answered</p>
            <p className="text-sm font-medium">{agent.answered}</p>
          </div>
          <div className="space-y-1">
            <p className="text-xs text-muted-foreground">Missed</p>
            <p className="text-sm font-medium">{agent.missed}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};