'use client'

import { DonutChart } from '@tremor/react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { formatStatus, getStatusColor } from './chart-theme'

interface StatusDataPoint {
  status: string
  count: number
}

interface StatusBreakdownProps {
  data: StatusDataPoint[]
}

export function StatusBreakdownChart({ data }: StatusBreakdownProps) {
  if (!data?.length) return null

  const total = data.reduce((sum, item) => sum + item.count, 0)

  const chartData = data.map((d) => ({
    name: formatStatus(d.status),
    value: d.count,
  }))

  const colors = data.map((d) => getStatusColor(d.status))

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <span>Project Status Distribution</span>
          <span className="text-sm font-normal text-muted-foreground">
            {total} projects
          </span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="flex items-center justify-center">
          <DonutChart
            data={chartData}
            category="value"
            index="name"
            colors={colors}
            showLabel={true}
            className="h-[250px] w-[250px]"
          />
        </div>
      </CardContent>
    </Card>
  )
}
