"use client"

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

interface RevenueChartProps {
  data: ChartDataPoint[]
}

export function RevenueChart({ data }: RevenueChartProps) {
  const { theme } = useTheme()
  const colors = getChartColors(theme)

  const chartData = {
    labels: data.map((d) => d.label),
    datasets: [
      {
        label: "Revenue",
        data: data.map((d) => d.value),
        borderColor: colors.blue,
        backgroundColor: `${colors.blue.replace('rgb', 'rgba').replace(')', ', 0.2)')}`,
      },
      {
        label: "Subscriptions",
        data: data.map((d) => d.secondaryValue || 0),
        borderColor: colors.orange,
        backgroundColor: `${colors.orange.replace('rgb', 'rgba').replace(')', ', 0.2)')}`,
      },
    ],
  }

  return (
    <Card className="h-[350px] flex flex-col">
      <CardHeader className="flex-shrink-0">
        <CardTitle>Revenue Overview</CardTitle>
        <CardDescription>Showing total revenue for the last 6 months</CardDescription>
      </CardHeader>
      <CardContent className="flex-1 min-h-0">
        <LineChart data={chartData} height={230} showGrid={false} showPoints={false} />
      </CardContent>
    </Card>
  )
}