import { GlobalOutlined, EyeOutlined } from '@ant-design/icons';
import { TILE_LAYERS } from './tileLayers';

interface Props {
  activeKey: string;
  onChange: (key: string) => void;
  position?: 'bottom-left' | 'bottom-right';
  style?: React.CSSProperties;
}

const icons: Record<string, React.ReactNode> = {
  normal: <GlobalOutlined />,
  dark: <EyeOutlined />,
  satellite: <GlobalOutlined style={{ transform: 'rotate(45deg)' }} />,
};

export default function TileLayerToggle({ activeKey, onChange, position = 'bottom-right', style }: Props) {
  const posStyle = position === 'bottom-left'
    ? { left: 10, bottom: 16 }
    : { right: 10, bottom: 140 }; // Increased from 80 to 140 for legend clearance

  return (
    <div
      style={{
        position: 'absolute',
        ...posStyle,
        zIndex: 1000,
        display: 'flex',
        flexDirection: 'column',
        gap: 4,
        ...style,
      }}
    >
      {TILE_LAYERS.map((layer) => (
        <button
          key={layer.key}
          onClick={() => onChange(layer.key)}
          title={layer.label}
          style={{
            width: 36,
            height: 36,
            borderRadius: 8,
            border: activeKey === layer.key ? '2px solid #1890ff' : '1px solid rgba(255,255,255,0.3)',
            background: activeKey === layer.key ? 'rgba(24, 144, 255, 0.25)' : 'rgba(0,0,0,0.6)',
            color: activeKey === layer.key ? '#1890ff' : 'rgba(255,255,255,0.8)',
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: 16,
            backdropFilter: 'blur(4px)',
            transition: 'all 0.2s',
          }}
        >
          {icons[layer.key] ?? <GlobalOutlined />}
        </button>
      ))}
    </div>
  );
}
