'use client';

import type { RatingSummary } from '@alqove/api-client';
import { cn } from '@/lib/utils';

interface Props {
  dimensions: RatingSummary['dimensions'];
  /**
   * Compact mode shrinks spacing + label column so the card can sit in a
   * dashboard tile alongside other widgets. Default (false) is the full-width
   * version used on `/seller/reviews` and `/stores/[id]`.
   */
  compact?: boolean;
}

const ROWS: { key: keyof RatingSummary['dimensions']; label: string }[] = [
  { key: 'item_as_described', label: 'Item as described' },
  { key: 'shipping_speed', label: 'Shipping speed' },
  { key: 'communication', label: 'Communication' },
  { key: 'packaging', label: 'Packaging' },
];

export function DimensionBreakdownCard({ dimensions, compact = false }: Props) {
  return (
    <div
      data-testid="dimension-breakdown"
      data-compact={compact ? 'true' : 'false'}
      className={cn(
        'rounded-lg border border-slate-200 bg-white',
        compact ? 'p-3' : 'p-4',
      )}
    >
      <h3 className="text-sm font-semibold text-slate-900">Rating breakdown</h3>
      <ul className={cn('mt-3', compact ? 'space-y-1' : 'space-y-2')}>
        {ROWS.map((r) => {
          const value = dimensions[r.key];
          const pct = value !== null ? (value / 5) * 100 : 0;
          return (
            <li key={r.key} className="flex items-center gap-3 text-sm">
              <span
                className={cn(
                  'shrink-0 text-slate-700',
                  compact ? 'w-28 text-xs' : 'w-36',
                )}
              >
                {r.label}
              </span>
              <div className="relative h-2 flex-1 overflow-hidden rounded-full bg-slate-100">
                <div
                  className="absolute inset-y-0 left-0 bg-amber-500"
                  style={{ width: `${pct}%` }}
                />
              </div>
              <span className="w-10 shrink-0 text-right tabular-nums text-slate-700">
                {value !== null ? value.toFixed(1) : '—'}
              </span>
            </li>
          );
        })}
      </ul>
    </div>
  );
}