'use client';

import { useTheme } from '@/context/ThemeContext';
import Image from 'next/image';
import { useState } from 'react';
import { normalizeConnectorTypeForIcon } from '@/lib/connectorType';

interface ConnectorTypeIconProps {
  type: string;
  size?: number;
  className?: string;
}

const typeToSrcMap: Record<string, string> = {
  TYPE2: '/images/connector/type2.png',
  CCS2: '/images/connector/ccs2.png',
  CHADEMO: '/images/connector/chademo.png',
  CCS1: '/images/connector/ccs1.png',
  TYPE1: '/images/connector/j1772.png',
};

export default function ConnectorTypeIcon({ type, size = 20, className }: ConnectorTypeIconProps) {
  const { theme } = useTheme();
  const [hasError, setHasError] = useState(false);
  const upper = normalizeConnectorTypeForIcon(type);
  const src = typeToSrcMap[`${upper}`];

  if (!src || hasError) {
    return <span className={className}>🔌</span>;
  }

  return (
    <Image
      src={theme === 'dark' ? src.replace('.png', '_dark.png') : src}
      alt={`${upper} connector icon`}
      width={size}
      height={size}
      className={className}
      unoptimized
      onError={() => setHasError(true)}
    />
  );
}