import { ReactNode } from 'react';

import { Card } from '@/components/ui/Card';

type MetricCardTone =
  | 'blue'
  | 'green'
  | 'purple'
  | 'red';

type MetricCardProps = {
  title: string;
  value: string;
  subtitle: string;
  icon: ReactNode;
  tone?: MetricCardTone;
};

const toneStyles: Record<
  MetricCardTone,
  {
    iconBg: string;
    iconText: string;
    glow: string;
  }
> = {
  blue: {
    iconBg: 'bg-blue-500/10',
    iconText: 'text-blue-300',
    glow: 'from-blue-500/20',
  },
  green: {
    iconBg: 'bg-emerald-500/10',
    iconText: 'text-emerald-300',
    glow: 'from-emerald-500/20',
  },
  purple: {
    iconBg: 'bg-violet-500/10',
    iconText: 'text-violet-300',
    glow: 'from-violet-500/20',
  },
  red: {
    iconBg: 'bg-red-500/10',
    iconText: 'text-red-300',
    glow: 'from-red-500/20',
  },
};

export function MetricCard({
  title,
  value,
  subtitle,
  icon,
  tone = 'blue',
}: MetricCardProps) {
  const style = toneStyles[tone];

  return (
    <Card className="group relative h-full min-h-[118px] overflow-hidden border border-white/5 bg-[#07111f]/90 transition-all duration-300 hover:border-white/10 hover:bg-[#0a1728]">
      <div
        className={`absolute inset-x-0 top-0 h-px bg-gradient-to-r ${style.glow} via-white/40 to-transparent opacity-70`}
      />

      <div className="absolute -right-10 -top-10 h-32 w-32 rounded-full bg-white/[0.025] blur-3xl transition-all duration-500 group-hover:scale-125" />

      <div className="relative flex h-full items-start gap-4">
        <div
          className={`shrink-0 rounded-2xl ${style.iconBg} ${style.iconText} border border-white/5 p-3 shadow-lg backdrop-blur-xl`}
        >
          {icon}
        </div>

        <div className="min-w-0 flex-1">
          <p className="truncate text-sm font-medium text-slate-400">
            {title}
          </p>

          <h3 className="mt-1 truncate text-2xl font-black tracking-tight text-white 2xl:text-3xl">
            {value}
          </h3>

          <p className="mt-2 line-clamp-2 text-xs leading-5 text-slate-500">
            {subtitle}
          </p>
        </div>
      </div>
    </Card>
  );
}