import { HandMetal } from 'lucide-react';

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

interface ZoneSignsPanelProps {
  readonly zone: ZoneInfo;
}

export function ZoneSignsPanel({ zone }: ZoneSignsPanelProps) {
  return (
    <div className="bg-white/70 rounded-xl p-4">
      <h4 className={cn('font-semibold text-sm mb-3 flex items-center gap-2', zone.textClass)}>
        <HandMetal size={14} />
        Matching Signs
      </h4>
      <div className="space-y-2">
        {zone.signs.map((sign) => (
          <div key={sign} className={cn(zone.bgClass, 'rounded-lg p-2.5 flex items-center gap-2')}>
            <div className={cn(
              'w-8 h-8 rounded-lg bg-gradient-to-br flex items-center justify-center',
              ZONE_GRADIENT_CLASSES[zone.color],
            )}
            >
              <HandMetal size={14} className="text-white" />
            </div>
            <span className={cn('text-sm font-semibold', zone.textClass)}>"{sign}"</span>
          </div>
        ))}
      </div>
    </div>
  );
}
