import type { LucideIcon } from 'lucide-react';

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

interface ZoneDetailListPanelProps {
  readonly zone: ZoneInfo;
  readonly title: string;
  readonly icon: LucideIcon;
  readonly items: readonly string[];
}

export function ZoneDetailListPanel({
  zone,
  title,
  icon: Icon,
  items,
}: ZoneDetailListPanelProps) {
  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)}>
        <Icon size={14} />
        {title}
      </h4>
      <ul className="space-y-2">
        {items.map((item) => (
          <li key={item} className="flex items-start gap-2">
            <span className={cn(
              'w-1.5 h-1.5 rounded-full mt-1.5 flex-shrink-0 bg-gradient-to-br',
              ZONE_GRADIENT_CLASSES[zone.color],
            )}
            />
            <span className="text-xs text-gray-600">{item}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}
