'use client'

import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Cell } from 'recharts'

// 벤치마크 데이터
const benchmarkData = [
  { category: '유전체 점수', myFarm: 79.8, regional: 65.2, top10: 88.5 },
  { category: 'MPT 충족률', myFarm: 74.6, regional: 72.0, top10: 85.2 },
  { category: 'A등급 비율', myFarm: 37.5, regional: 18.8, top10: 45.0 },
  { category: '번식능력', myFarm: 72, regional: 70, top10: 82 },
]

export function RegionBenchmark() {
  return (
    <Card className="shadow-sm">
      <CardHeader className="pb-2 md:pb-3">
        <CardTitle className="text-xs md:text-sm font-semibold">보은군 비교 벤치마크</CardTitle>
        <CardDescription className="text-[11px] md:text-xs mt-0.5">
          내농장 vs 보은군 평균 vs 상위 10%
        </CardDescription>
      </CardHeader>
      <CardContent className="pt-0 pb-3 md:pb-4">
        <ResponsiveContainer width="100%" height={280}>
          <BarChart data={benchmarkData} barGap={4}>
            <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
            <XAxis
              dataKey="category"
              tick={{ fontSize: 11 }}
              stroke="#6b7280"
            />
            <YAxis
              tick={{ fontSize: 11 }}
              stroke="#6b7280"
              domain={[0, 100]}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: 'white',
                border: '1px solid #e5e7eb',
                borderRadius: '6px',
                fontSize: '11px'
              }}
              formatter={(value: number) => `${value.toFixed(1)}`}
            />
            <Legend wrapperStyle={{ fontSize: '11px' }} />

            <Bar dataKey="regional" fill="#9ca3af" name="보은군 평균" radius={[4, 4, 0, 0]} />
            <Bar dataKey="myFarm" fill="#2563eb" name="내 농장" radius={[4, 4, 0, 0]} />
            <Bar dataKey="top10" fill="#10b981" name="상위 10%" radius={[4, 4, 0, 0]} />
          </BarChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  )
}
