"use client"

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

interface RevenueChartProps {
  data: ChartDataPoint[]
}

export function RevenueChart({ data }: RevenueChartProps) {
  const chartData = {
    labels: data.map((d) => d.label),
    datasets: [
      {
        label: "Revenue",
        data: data.map((d) => d.value),
        borderColor: "rgb(244, 114, 182)",
        backgroundColor: "rgba(244, 114, 182, 0.2)",
      },
      {
        label: "Subscriptions",
        data: data.map((d) => d.secondaryValue || 0),
        borderColor: "rgb(94, 234, 212)",
        backgroundColor: "rgba(94, 234, 212, 0.2)",
      },
    ],
  }

  return (
    <Card className="h-[300px] 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={180} showGrid={false} showPoints={false} />
      </CardContent>
    </Card>
  )
}