'use client'

import { DonutChart } from '@tremor/react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { getStatusColor, formatStatus } 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>
        <DonutChart
          data={chartData}
          category="value"
          index="name"
          colors={colors as string[]}
          showLabel={true}
          className="h-[300px]"
        />
      </CardContent>
    </Card>
  )
}