// Card / Panel primitive — wraps the PANEL_CLASS pattern with an optional header slot.

export function Card({ title, subtitle, right, children, padded = true, className = '' }) {
  return (
    <div className={`overflow-hidden rounded-lg border border-slate-200 bg-white shadow-[0_1px_0_rgba(15,23,42,0.04)] ${className}`}>
      {(title || right) && (
        <div className="flex items-center justify-between border-b border-slate-100 px-5 py-3">
          <div>
            {title && <div className="text-[13px] font-semibold text-slate-900">{title}</div>}
            {subtitle && <div className="text-[12px] text-slate-500">{subtitle}</div>}
          </div>
          {right}
        </div>
      )}
      <div className={padded ? 'p-5' : ''}>{children}</div>
    </div>
  )
}

export function StatCard({ label, value, sub, icon: Icon, accent, size = 'md', className = '' }) {
  const sizes = {
    sm: { val: 'text-2xl',    pad: 'p-4' },
    md: { val: 'text-[28px]', pad: 'p-5' },
    lg: { val: 'text-4xl',    pad: 'p-6' },
  }
  const s = sizes[size] || sizes.md
  return (
    <div className={`relative overflow-hidden rounded-lg border border-slate-200 bg-white ${s.pad} shadow-[0_1px_0_rgba(15,23,42,0.04)] ${className}`}>
      <div className="flex items-start justify-between">
        <div className="text-[11px] font-medium uppercase tracking-[0.1em] text-slate-500">{label}</div>
        {Icon && <Icon className="h-4 w-4 text-slate-300" />}
      </div>
      <div className={`mt-2 font-mono ${s.val} font-medium tabular-nums tracking-tight ${accent ? 'text-sky-600' : 'text-slate-900'}`}>
        {value ?? '—'}
      </div>
      {sub && <div className="mt-1 text-[12px] text-slate-500">{sub}</div>}
    </div>
  )
}
