'use client'

import { useTranslations } from 'next-intl'
import IconButton from '@mui/material/IconButton'
import type { LayerType } from './cropZoningTypes'

const LAYER_ICONS: Record<LayerType, string> = {
  crops: 'tabler-plant-2',
  waterNeed: 'tabler-droplet',
  soilQuality: 'tabler-seedling',
  cultivationRisk: 'tabler-alert-triangle'
}

type LayerControlProps = {
  activeLayer: LayerType
  onLayerChange: (layer: LayerType) => void
}

const LAYER_ORDER: LayerType[] = ['crops', 'waterNeed', 'soilQuality', 'cultivationRisk']

export default function LayerControl({ activeLayer, onLayerChange }: LayerControlProps) {
  const t = useTranslations('cropZoning')

  return (
    <div className='absolute top-4 end-4 z-[1000] flex flex-col gap-1 rounded-xl border border-white/20 bg-white/70 py-2 shadow-lg backdrop-blur-md dark:bg-gray-900/70 dark:border-gray-700/50'>
      {LAYER_ORDER.map(layer => (
        <IconButton
          key={layer}
          size='small'
          onClick={() => onLayerChange(layer)}
          title={t(`layers.${layer}`)}
          sx={{
            mx: 0.5,
            bgcolor: activeLayer === layer ? 'action.selected' : 'transparent',
            '&:hover': { bgcolor: activeLayer === layer ? 'action.selected' : 'action.hover' }
          }}
        >
          <i className={`${LAYER_ICONS[layer]} text-lg`} />
        </IconButton>
      ))}
    </div>
  )
}