import { Box, IconButton, Tooltip } from '@mui/material'
import { LayoutGrid, LayoutList } from 'lucide-react'

interface Props {
  view: 'list' | 'grid'
  onChange: (v: 'list' | 'grid') => void
}

export function ViewToggle({ view, onChange }: Props) {
  return (
    <Box sx={{ display: 'flex', gap: 0.25, border: '1px solid #e2e8f0', borderRadius: 1, overflow: 'hidden' }}>
      <Tooltip title="Listenansicht">
        <IconButton
          size="small"
          onClick={() => onChange('list')}
          sx={{
            borderRadius: 0,
            width: 32,
            height: 32,
            bgcolor: view === 'list' ? '#152642' : 'transparent',
            color: view === 'list' ? 'white' : '#64748b',
            '&:hover': { bgcolor: view === 'list' ? '#162d4a' : '#f1f5f9' },
          }}
        >
          <LayoutList size={15} />
        </IconButton>
      </Tooltip>
      <Tooltip title="Kartenansicht">
        <IconButton
          size="small"
          onClick={() => onChange('grid')}
          sx={{
            borderRadius: 0,
            width: 32,
            height: 32,
            bgcolor: view === 'grid' ? '#152642' : 'transparent',
            color: view === 'grid' ? 'white' : '#64748b',
            '&:hover': { bgcolor: view === 'grid' ? '#162d4a' : '#f1f5f9' },
          }}
        >
          <LayoutGrid size={15} />
        </IconButton>
      </Tooltip>
    </Box>
  )
}