import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded'
import Box from '@mui/material/Box'
import IconButton from '@mui/material/IconButton'
import { Cherry, Hammer, Trees, WavesHorizontal } from 'lucide-react'
import type { ColorScheme } from '@/shared/model/theme'

type Props = {
  value: ColorScheme
  onChange: (scheme: ColorScheme) => void
  orientation?: 'horizontal' | 'vertical'
}

const SCHEMES: { key: ColorScheme; color: string; label: string; icon: React.ReactNode }[] = [
  { key: 'craft', color: '#6D4C41', label: 'Крафт', icon: <Hammer size={14} /> },
  { key: 'forest', color: '#2E7D32', label: 'Лес', icon: <Trees size={14} /> },
  { key: 'ocean', color: '#1565C0', label: 'Океан', icon: <WavesHorizontal size={14} /> },
  { key: 'berry', color: '#7B1FA2', label: 'Ягоды', icon: <Cherry size={14} /> },
]

export function SchemeSwitcher({ value, onChange, orientation = 'horizontal' }: Props) {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: orientation === 'vertical' ? 'column' : 'row',
        gap: 0.5,
        alignItems: 'center',
      }}
    >
      {SCHEMES.map((s) => {
        const active = value === s.key
        return (
          <IconButton
            key={s.key}
            onClick={() => onChange(s.key)}
            size="small"
            title={s.label}
            sx={{
              width: 30,
              height: 30,
              minWidth: 30,
              bgcolor: s.color,
              border: 2,
              borderColor: active ? 'common.white' : 'rgba(255,255,255,0.4)',
              boxShadow: active ? `0 0 0 1.5px ${s.color}, 0 0 8px ${s.color}99` : 'none',
              transform: active ? 'scale(1.1)' : 'scale(1)',
              color: 'common.white',
              transition: 'all 0.2s ease',
              '&:hover': {
                transform: 'scale(1.2)',
                bgcolor: s.color,
              },
            }}
          >
            {active ? <CheckCircleRoundedIcon sx={{ fontSize: 14 }} /> : s.icon}
          </IconButton>
        )
      })}
    </Box>
  )
}