Stats with Circular Progress

'use client';

import { ExternalLink } from 'lucide-react';
import Link from 'next/link';
import { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts';
import { Card, CardContent } from '@/components/ui/card';
import { type ChartConfig, ChartContainer } from '@/components/ui/chart';

const data = [
  {
    name: 'Workspaces',
    capacity: 20,
    current: 1,
    allowed: 5,
    fill: 'var(--chart-1)',
  },
  {
    name: 'Dashboards',
    capacity: 10,
    current: 2,
    allowed: 20,
    fill: 'var(--chart-2)',
  },
  {
    name: 'Chart widgets',
    capacity: 30,
    current: 15,
    allowed: 50,
    fill: 'var(--chart-3)',
  },
  {
    name: 'Storage',
    capacity: 50,
    current: 25,
    allowed: 100,
    fill: 'var(--chart-4)',
  },
];

const chartConfig = {
  capacity: {
    label: 'Capacity',
    color: 'hsl(var(--primary))',
  },
} satisfies ChartConfig;

export default function Stats07() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <div className="w-full">
        <h2 className="text-balance font-medium text-foreground text-xl">
          Plan overview
        </h2>
        <p className="mt-1 text-pretty text-muted-foreground text-sm leading-6">
          You are currently on the{' '}
          <span className="font-medium text-foreground">starter plan</span>.{' '}
          <Link
            className="inline-flex items-center gap-1 text-primary hover:underline hover:underline-offset-4"
            href="#"
          >
            View other plans
            <ExternalLink aria-hidden={true} className="size-4" />
          </Link>
        </p>
        <dl className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {data.map((item) => (
            <Card className="p-4 shadow-2xs" key={item.name}>
              <CardContent className="flex items-center space-x-4 p-0">
                <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="capacity"
                        fill="var(--primary)"
                      />
                    </RadialBarChart>
                  </ChartContainer>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <span className="font-medium text-base text-foreground">
                      {item.capacity}%
                    </span>
                  </div>
                </div>
                <div>
                  <dt className="font-medium text-foreground text-sm">
                    {item.name}
                  </dt>
                  <dd className="text-muted-foreground text-sm">
                    {item.current} of {item.allowed} used
                  </dd>
                </div>
              </CardContent>
            </Card>
          ))}
        </dl>
      </div>
    </div>
  );
}