"use client"

import { TrendingUp } from "lucide-react"
import { CartesianGrid, Line, LineChart, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"
import { trpc } from "@/app/_trpc/client"

const chartConfig = {
    total: {
      label: "total",
      color: "hsl(var(--chart-1))",
    }
  } satisfies ChartConfig


   function ProjectEarningsChart({searchParams}:{searchParams:Record<string,any>}) {
    const [projectsEarnings]=trpc.projects.getProjectEarningsYear.useSuspenseQuery(searchParams,{
      refetchOnMount:false,
      refetchOnWindowFocus:false
    })

    
    return (
        <Card className="h-full bg-white">
          <CardHeader>
            <CardTitle>Ganancias</CardTitle>
            <CardDescription>Enero - hoy 2024</CardDescription>
          </CardHeader>
          <CardContent>
            <ChartContainer config={chartConfig} className=" min-h-[150px]  min-w-[300px] ">
              <LineChart
                accessibilityLayer
                data={projectsEarnings?.projectsAnalitics ?? []}
                margin={{
                  top: 20,
                  left: 12,
                  right: 12,
                }}
              >
                <CartesianGrid vertical={false} />
                <XAxis
                  dataKey="month"
                  tickLine={false}
                  axisLine={false}
                  tickMargin={8}
                  tickFormatter={(value) => value.slice(0, 3)}
                />
                <ChartTooltip
                  cursor={false}
                  content={<ChartTooltipContent indicator="line" />}
                />
                <Line
                  dataKey="total"
                  type="natural"
                  stroke="var(--color-total)"
                  strokeWidth={2}
                  dot={{
                    fill: "var(--color-total)",
                  }}
                  activeDot={{
                    r: 6,
                  }}
                >
                
                </Line>
              </LineChart>
            </ChartContainer>
          </CardContent>
        </Card>
      )
}

export default ProjectEarningsChart