import type { NasaIconName } from '../../components/icons/NasaIcon';

import NasaIcon from '../../components/icons/NasaIcon';



type Accent = 'gold' | 'green' | 'blue' | 'neutral';



const ACCENT: Record<Accent, string> = {

  blue: 'border-l-[#00d4ff]',

  green: 'border-l-[#3dff8a]',

  gold: 'border-l-[#ffb347]',

  neutral: 'border-l-[#7a9bb8]',

};



export default function DashboardStatCard({

  label,

  value,

  hint,

  accent = 'neutral',

  icon,

}: {

  label: string;

  value: string;

  hint?: string;

  accent?: Accent;

  icon?: NasaIconName;

}) {

  return (

    <div className={`dash-card border-l-4 ${ACCENT[accent]}`}>

      <p className="dash-stat-label flex items-center gap-1.5">

        {icon && <NasaIcon name={icon} size={14} className="nasa-icon--telemetry" />}

        {label}

      </p>

      <p className="dash-stat-value">{value}</p>

      {hint && <p className="dash-stat-hint">{hint}</p>}

    </div>

  );

}

