Stats with Circular Progress and Links

'use client';

import { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts';
import { Card, CardContent, CardFooter } from '@/components/ui/card';
import { type ChartConfig, ChartContainer } from '@/components/ui/chart';

const data = [
  {
    name: 'HR',
    progress: 25,
    budget: '$1,000',
    current: '$250',
    href: '#',
    fill: 'var(--chart-1)',
  },
  {
    name: 'Marketing',
    progress: 55,
    budget: '$1,000',
    current: '$550',
    href: '#',
    fill: 'var(--chart-2)',
  },
  {
    name: 'Finance',
    progress: 85,
    budget: '$1,000',
    current: '$850',
    href: '#',
    fill: 'var(--chart-3)',
  },
  {
    name: 'Engineering',
    progress: 70,
    budget: '$2,000',
    current: '$1,400',
    href: '#',
    fill: 'var(--chart-4)',
  },
];

const chartConfig = {
  progress: {
    label: 'Progress',
    color: 'var(--primary)',
  },
} satisfies ChartConfig;

export default function Stats08() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <dl className="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {data.map((item) => (
          <Card className="gap-0 p-0 shadow-2xs" key={item.name}>
            <CardContent className="p-4">
              <div className="flex items-center space-x-3">
                <div className="relative flex items-center justify-center">
                  <ChartContainer
                    className="h-[80px] w-[80px]"
                    config={chartConfig}
                  >
                    <RadialBarChart
                      barSize={6}
                      data={[item]}
                      endAngle={-270}
                      innerRadius={30}
                      outerRadius={40}
                      startAngle={90}
                    >
                      <PolarAngleAxis
                        angleAxisId={0}
                        axisLine={false}
                        domain={[0, 100]}
                        tick={false}
                        type="number"
                      />
                      <RadialBar
                        angleAxisId={0}
                        background
                        cornerRadius={10}
                        dataKey="progress"
                        fill={item.fill}
                      />
                    </RadialBarChart>
                  </ChartContainer>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <span className="font-medium text-base text-foreground">
                      {item.progress}%
                    </span>
                  </div>
                </div>
                <div>
                  <dd className="font-medium text-base text-foreground">
                    {item.current} / {item.budget}
                  </dd>
                  <dt className="text-muted-foreground text-sm">
                    Budget {item.name}
                  </dt>
                </div>
              </div>
            </CardContent>
            <CardFooter className="flex items-center justify-end border-border border-t p-0!">
              <a
                className="px-6 py-3 font-medium text-primary text-sm hover:text-primary/90"
                href={item.href}
              >
                View more &#8594;
              </a>
            </CardFooter>
          </Card>
        ))}
      </dl>
    </div>
  );
}