import {
  ZONE_GRADIENT_CLASSES,
  ZONE_RING_CLASSES,
} from '@/shared/constants/zonesOfRegulation';
import type {
  ZoneColor,
  ZoneInfo,
} from '@/shared/types/app';
import { cn } from '@/lib/utils';

interface ZoneOverviewCardProps {
  readonly zone: ZoneInfo;
  readonly expandedZone: ZoneColor | null;
  readonly checkedInZone: ZoneColor | null;
  readonly isSaving: boolean;
  readonly onSelect: (zone: ZoneColor) => Promise<void>;
}

export function ZoneOverviewCard({
  zone,
  expandedZone,
  checkedInZone,
  isSaving,
  onSelect,
}: ZoneOverviewCardProps) {
  const selected = (expandedZone ?? checkedInZone) === zone.color;

  return (
    <button
      type="button"
      onClick={() => { void onSelect(zone.color); }}
      disabled={isSaving}
      className={cn(
        zone.bgClass,
        'group flex h-auto flex-col items-stretch justify-start rounded-2xl border-2 p-5 text-left shadow-sm transition-transform duration-200 hover:scale-[1.02] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950 disabled:pointer-events-none disabled:opacity-70',
        selected
          ? `${zone.borderClass} ring-2 ring-offset-2 ring-offset-slate-950 ${ZONE_RING_CLASSES[zone.color]}`
          : 'border-transparent',
      )}
      aria-expanded={selected}
    >
      <span className={cn(
        'w-12 h-12 rounded-xl bg-gradient-to-br flex items-center justify-center mb-3 transition-transform duration-200 group-hover:scale-105',
        ZONE_GRADIENT_CLASSES[zone.color],
      )}
      >
        <span className="text-white text-xl font-bold">{zone.color[0].toUpperCase()}</span>
      </span>
      <span className={cn('font-bold block', zone.textClass)}>{zone.name}</span>
      <span className="text-xs text-gray-700 mt-1 leading-relaxed block">{zone.description}</span>
    </button>
  );
}
