"use client"

import { useTheme } from "next-themes"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { BarChart } from "@/components/charts/bar-chart"
import { getChartColors } from "@/lib/chart-config"
import type { ChartDataPoint } from "@/types/dashboard"

interface SalesChartProps {
  data: ChartDataPoint[]
}

export function SalesChart({ data }: SalesChartProps) {
  const { theme } = useTheme()
  const colors = getChartColors(theme)

  // Calculate total and change percentage
  const total = data.reduce((sum, d) => sum + d.value, 0)
  const lastMonthValue = data[data.length - 2]?.value || 0
  const currentMonthValue = data[data.length - 1]?.value || 0
  const changePercent = lastMonthValue > 0
    ? (((currentMonthValue - lastMonthValue) / lastMonthValue) * 100).toFixed(1)
    : "0.0"

  // Alternate colors for bars using centralized palette
  const backgroundColors = data.map((_, index) =>
    index % 2 === 0 ? colors.darkBlue : colors.orange
  )

  const chartData = {
    labels: data.map((d) => d.label),
    datasets: [
      {
        label: "Expenditure",
        data: data.map((d) => d.value),
        backgroundColor: backgroundColors,
      },
    ],
  }

  return (
    <Card className="h-[350px] flex flex-col">
      <CardHeader className="flex-shrink-0">
        <CardTitle>Expenditure</CardTitle>
        <CardDescription>+{changePercent}% from last month</CardDescription>
      </CardHeader>
      <CardContent className="flex-1 min-h-0">
        <BarChart data={chartData} height={230} showGrid={false} />
      </CardContent>
    </Card>
  )
}