import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import type { OverviewProgressItem } from '@/features/overview/server/overview-data';

export function KsaProgress({
  items
}: {
  items: OverviewProgressItem[];
}) {
  return (
    <Card className='h-full'>
      <CardHeader>
        <CardTitle>ความคืบหน้า K / S / A</CardTitle>
        <CardDescription>ชั่วโมงที่อนุมัติแล้วเทียบกับเป้าหมายประจำปีในแต่ละหมวด</CardDescription>
      </CardHeader>
      <CardContent className='space-y-5'>
        {items.map((item) => (
          <div key={item.key} className='space-y-2'>
            <div className='flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'>
              <div>
                <div className='font-medium'>{item.label}</div>
                <div className='text-muted-foreground text-sm'>
                  {item.approvedHours.toFixed(item.approvedHours % 1 === 0 ? 0 : 1)} /{' '}
                  {item.targetHours.toFixed(item.targetHours % 1 === 0 ? 0 : 1)} ชั่วโมง
                </div>
              </div>
              <div className='flex flex-wrap gap-2'>
                <Badge variant='outline'>
                  {item.percent.toFixed(item.percent % 1 === 0 ? 0 : 1)}%
                </Badge>
                <Badge variant='secondary'>
                  เหลือ {item.remainingHours.toFixed(item.remainingHours % 1 === 0 ? 0 : 1)} ชม.
                </Badge>
              </div>
            </div>
            <Progress value={item.percent} className='h-2.5' />
          </div>
        ))}
      </CardContent>
    </Card>
  );
}
