import { TrendingUp } from "lucide-react"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"

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


const chartConfig = {
  desktop: {
    label: "count",
    color: "hsl(var(--primary))",
  },
} satisfies ChartConfig

 function UserWeeklyActivity() {
  const  [data]=trpc.users.getUserWeeklyActivity.useSuspenseQuery(undefined,{
    refetchOnMount:false,
    refetchOnWindowFocus:false
  })

 

  return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle>Actividad semanal</CardTitle>
        <CardDescription>Tareas completadas esta semana</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig} className=" min-h-[200px]">
          <BarChart accessibilityLayer data={data}>
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="day"
              tickLine={false}
              tickMargin={10}
              axisLine={false}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel />}
            />
            <Bar dataKey="count" fill="var(--color-desktop)" radius={8} />
          </BarChart>
        </ChartContainer>
      </CardContent>
      <CardFooter className="flex-col items-start gap-2 text-sm">
     
        <div className="leading-none text-muted-foreground">
          Showing total visitors for the last 6 months
        </div>
      </CardFooter>
    </Card>
  )
}

export default UserWeeklyActivity