'use client'

import { useTranslations } from 'next-intl'
import { CROP_COLORS, type CropType } from './cropZoningTypes'

export default function ZoneLegend() {
  const t = useTranslations('cropZoning')

  const items: { crop: CropType; label: string }[] = [
    { crop: 'wheat', label: t('crops.wheat') },
    { crop: 'canola', label: t('crops.canola') },
    { crop: 'saffron', label: t('crops.saffron') }
  ]

  return (
    <div className='absolute bottom-4 start-4 z-[1000] rounded-xl border border-white/20 bg-white/70 px-4 py-3 shadow-lg backdrop-blur-md dark:bg-gray-900/70 dark:border-gray-700/50'>
      <div className='text-xs font-medium text-gray-600 dark:text-gray-400 mbe-2'>{t('legend')}</div>
      <div className='flex flex-col gap-1.5'>
        {items.map(({ crop, label }) => (
          <div key={crop} className='flex items-center gap-2'>
            <div
              className='h-4 w-4 rounded'
              style={{ backgroundColor: CROP_COLORS[crop], opacity: 0.8 }}
            />
            <span className='text-sm text-gray-700 dark:text-gray-300'>{label}</span>
          </div>
        ))}
      </div>
    </div>
  )
}