Stats with Status

'use client';

import { ArrowRight } from 'lucide-react';
import Link from 'next/link';
import { cn } from '@/lib/utils';

const statuses = {
  within: { label: 'On track', color: 'bg-emerald-500' },
  observe: { label: 'Needs attention', color: 'bg-amber-500' },
  critical: { label: 'At risk', color: 'bg-red-500' },
};

const data = [
  {
    name: 'Europe',
    stat: '$10,023',
    goalsAchieved: 3,
    status: 'observe',
    href: '#',
  },
  {
    name: 'North America',
    stat: '$14,092',
    goalsAchieved: 5,
    status: 'within',
    href: '#',
  },
  {
    name: 'Asia',
    stat: '$113,232',
    goalsAchieved: 1,
    status: 'critical',
    href: '#',
  },
] as {
  name: string;
  stat: string;
  goalsAchieved: number;
  status: keyof typeof statuses;
  href: string;
}[];

const goals = [1, 2, 3, 4, 5];

export default function Stats06() {
  return (
    <div className="@container flex w-full items-center justify-center p-10">
      <dl className="grid w-full @2xl:grid-cols-3 grid-cols-1 @2xl:divide-x divide-y @2xl:divide-y-0 divide-foreground/10 overflow-hidden rounded-xl bg-background shadow-[0_0_0_1px_oklch(0_0_0/0.06),0_1px_2px_-1px_oklch(0_0_0/0.06),0_2px_4px_0_oklch(0_0_0/0.04)] dark:shadow-[0_0_0_1px_oklch(1_0_0/0.08)]">
        {data.map((item) => {
          const status = statuses[item.status];
          return (
            <div
              className="group relative flex flex-col gap-6 p-6 hover:bg-muted/40"
              key={item.name}
            >
              <div className="flex items-center justify-between gap-3">
                <dt className="truncate font-medium text-foreground text-sm">
                  {item.name}
                </dt>
                <dd className="flex shrink-0 items-center gap-2 text-muted-foreground text-sm">
                  <span
                    aria-hidden={true}
                    className={cn('size-1.5 rounded-full', status.color)}
                  />
                  {status.label}
                </dd>
              </div>
              <dd className="font-semibold text-3xl text-foreground tabular-nums tracking-tight">
                {item.stat}
              </dd>
              <dd className="flex flex-col gap-2">
                <div className="flex items-center justify-between text-sm">
                  <span className="text-muted-foreground">Goals achieved</span>
                  <span className="font-medium text-foreground tabular-nums">
                    {item.goalsAchieved}/{goals.length}
                  </span>
                </div>
                <div aria-hidden={true} className="flex gap-1">
                  {goals.map((goal) => (
                    <span
                      className={cn(
                        'h-1.5 flex-1 rounded-full',
                        goal <= item.goalsAchieved
                          ? status.color
                          : 'bg-foreground/10'
                      )}
                      key={goal}
                    />
                  ))}
                </div>
              </dd>
              <dd className="text-sm">
                <Link
                  className="flex items-center gap-1 font-medium text-foreground focus:outline-none"
                  href={item.href}
                >
                  <span aria-hidden={true} className="absolute inset-0" />
                  View region
                  <ArrowRight
                    aria-hidden={true}
                    className="size-4 shrink-0 transition-transform group-hover:translate-x-0.5"
                  />
                </Link>
              </dd>
            </div>
          );
        })}
      </dl>
    </div>
  );
}