import { Button } from '@/components/ui/button';
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 onToggle: (zone: ZoneColor) => void;
}

export function ZoneOverviewCard({
  zone,
  expandedZone,
  onToggle,
}: ZoneOverviewCardProps) {
  const selected = expandedZone === zone.color;

  return (
    <Button
      type="button"
      variant="ghost"
      onClick={() => onToggle(zone.color)}
      className={cn(
        zone.bgClass,
        'rounded-2xl p-5 border-2 transition-all duration-200 hover:scale-[1.02] text-left h-auto justify-start items-stretch flex-col whitespace-normal',
        selected
          ? `${zone.borderClass} ring-2 ring-offset-2 ${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',
        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>
  );
}
