'use client'

import { BarChart } from '@tremor/react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

interface ScoreDistributionProps {
  data: { score: number; count: number }[]
  averageScore: number
  totalScores: number
}

export function ScoreDistributionChart({
  data,
  averageScore,
  totalScores,
}: ScoreDistributionProps) {
  if (!data?.length) return null

  const chartData = data.map((d) => ({
    score: String(d.score),
    Count: d.count,
  }))

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <span>Score Distribution</span>
          <span className="text-sm font-normal text-muted-foreground">
            Avg: {averageScore.toFixed(2)} ({totalScores} scores)
          </span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <BarChart
          data={chartData}
          index="score"
          categories={['Count']}
          colors={['blue']}
          yAxisWidth={40}
          showLegend={false}
          className="h-[300px]"
        />
      </CardContent>
    </Card>
  )
}
