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: '#546E7A', label: 'Крафт', icon: <Hammer size={16} /> },
  { key: 'forest', color: '#2E8B57', label: 'Лес', icon: <Trees size={16} /> },
  { key: 'ocean', color: '#20B2AA', label: 'Океан', icon: <WavesHorizontal size={16} /> },
  { key: 'berry', color: '#8A2BE2', label: 'Ягоды', icon: <Cherry size={16} /> },
]

export function SchemeSwitcher({ value, onChange, orientation = 'horizontal' }: Props) {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: orientation === 'vertical' ? 'column' : 'row',
        gap: 1,
        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: 36,
              height: 36,
              minWidth: 36,
              bgcolor: 'transparent',
              border: 2,
              borderColor: active ? s.color : 'transparent',
              boxShadow: active ? `0 0 8px ${s.color}66` : 'none',
              transform: active ? 'scale(1.15)' : 'scale(1)',
              color: active ? s.color : 'text.secondary',
              transition: 'all 0.2s ease',
              '&:hover': {
                transform: 'scale(1.2)',
                borderColor: s.color,
                color: s.color,
              },
            }}
          >
            {s.icon}
          </IconButton>
        )
      })}
    </Box>
  )
}