import type { ReactNode } from 'react';

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

type DashboardCardProps = {
  title: string;
  value?: string | number;
  description?: string;
  icon?: ReactNode;
  footer?: ReactNode;
  className?: string;
  accent?: 'gold' | 'copper' | 'bronze';
};

const accentBorder = {
  gold: 'border-sovereign-gold/30 hover:border-sovereign-gold/50',
  copper: 'border-sovereign-copper/30 hover:border-sovereign-copper/50',
  bronze: 'border-sovereign-bronze/30 hover:border-sovereign-bronze/50',
};

/** Explorer / console metric card with institutional styling */
export function DashboardCard({
  title,
  value,
  description,
  icon,
  footer,
  className,
  accent = 'gold',
}: DashboardCardProps) {
  return (
    <article
      className={cn(
        'rounded-xl border bg-sovereign-midnight/60 p-4 transition-colors',
        accentBorder[accent],
        className
      )}
    >
      <div className="flex items-start justify-between gap-3">
        <div>
          <p className="text-xs font-medium uppercase tracking-wide text-sovereign-bronze">{title}</p>
          {value !== undefined && (
            <p className="mt-1 text-2xl font-bold tabular-nums text-sovereign-ivory">{value}</p>
          )}
        </div>
        {icon && (
          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-sovereign-bronze/30 bg-sovereign-obsidian text-sovereign-gold">
            {icon}
          </div>
        )}
      </div>
      {description && <p className="mt-2 text-sm leading-relaxed text-sovereign-ivory/60">{description}</p>}
      {footer && <div className="mt-3 border-t border-sovereign-bronze/15 pt-3">{footer}</div>}
    </article>
  );
}
