Stats with Value Breakdown

import { cn } from '@/lib/utils';

const data = [
  {
    label: 'After 1 year',
    value: '$2,400',
    percentage: '+8.2%',
  },
  {
    label: 'After 5 years',
    value: '$14,800',
    percentage: '+24.6%',
  },
  {
    label: 'After 10 years',
    value: '$38,500',
    percentage: '+52.1%',
  },
];

export function Stats15() {
  return (
    <div className="w-full max-w-2xs">
      <h3 className="text-balance font-medium text-foreground text-sm">
        Investment growth projection
      </h3>
      <ul className="mt-2 divide-y divide-border text-sm" role="list">
        {data.map((item, index) => (
          <li className="flex items-center justify-between py-3" key={index}>
            <span className="text-muted-foreground">{item.label}</span>
            <span className="flex items-center gap-3 tabular-nums">
              <span className="text-right font-medium text-foreground">
                {item.value}
              </span>
              <span aria-hidden="true" className="h-5 w-px bg-border" />
              <span
                className={cn(
                  'w-15 rounded px-1.5 py-1 text-center font-semibold text-xs',
                  'bg-emerald-50 text-emerald-600 dark:bg-emerald-400/10 dark:text-emerald-400'
                )}
              >
                {item.percentage}
              </span>
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}