export default function StatCard({ label, value, sub, accent, details, detailsPosition = 'below' }) {
  const showDetails = details?.length > 0
  const detailsOnRight = showDetails && detailsPosition === 'right'

  return (
    <div className="bg-slate-900 border border-slate-800 rounded-xl p-4 min-w-0">
      <div className={`flex ${detailsOnRight ? 'items-start justify-between gap-4' : 'flex-col gap-1'}`}>
        <div className="min-w-0">
          <p className="text-slate-400 text-xs uppercase tracking-widest truncate">{label}</p>
          <p className={`text-3xl font-bold ${accent ?? 'text-slate-100'}`}>{value}</p>
          {sub && <p className="text-slate-400 text-sm">{sub}</p>}
        </div>

        {detailsOnRight && (
          <div className="space-y-0.5 text-right shrink-0">
            {details.map((line) => (
              <p key={line} className="text-slate-500 text-xs font-medium">
                {line}
              </p>
            ))}
          </div>
        )}
      </div>

      {showDetails && !detailsOnRight && (
        <div className="mt-1 space-y-0.5">
          {details.map((line) => (
            <p key={line} className="text-slate-500 text-xs">
              {line}
            </p>
          ))}
        </div>
      )}
    </div>
  )
}