import Grid from '@mui/material/Grid'
import Link from '@mui/material/Link'
import Paper from '@mui/material/Paper'
import Stack from '@mui/material/Stack'
import Typography from '@mui/material/Typography'
import { Package, Store } from 'lucide-react'
import { Link as RouterLink } from 'react-router-dom'
import { DELIVERY_CARRIER_OPTIONS } from '@/shared/constants/delivery-carrier'
import { PICKUP_ADDRESS_FULL } from '@/shared/constants/pickup-point'

export function DeliverySection() {
  return (
    <Paper variant="outlined" sx={{ p: 3, borderRadius: 2 }}>
      <Typography variant="h5" gutterBottom>
        Доставка
      </Typography>
      <Grid container spacing={2}>
        <Grid size={{ xs: 12, sm: 6 }}>
          <Paper variant="outlined" sx={{ p: 2, borderRadius: 2, height: '100%' }}>
            <Stack spacing={1.5}>
              <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
                <Store size={28} />
                <Typography variant="h6">Самовывоз</Typography>
              </Stack>
              <Typography variant="body2" color="text.secondary">
                Бесплатно.
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {PICKUP_ADDRESS_FULL}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                Перед визитом согласуем время — чтобы заказ точно был готов к выдаче.
              </Typography>
              <Link component={RouterLink} to="/about" variant="body2">
                Посмотреть на карте
              </Link>
            </Stack>
          </Paper>
        </Grid>
        <Grid size={{ xs: 12, sm: 6 }}>
          <Paper variant="outlined" sx={{ p: 2, borderRadius: 2, height: '100%' }}>
            <Stack spacing={1.5}>
              <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
                <Package size={28} />
                <Typography variant="h6">Доставка по России</Typography>
              </Stack>
              <Typography variant="body2" color="text.secondary">
                Доступные службы доставки:
              </Typography>
              <Stack component="ul" spacing={0.5} sx={{ pl: 2, m: 0, listStyle: 'disc' }}>
                {DELIVERY_CARRIER_OPTIONS.map((c) => (
                  <Typography key={c.code} component="li" variant="body2" color="text.secondary">
                    {c.label}
                  </Typography>
                ))}
              </Stack>
              <Typography variant="body2" color="text.secondary">
                Стоимость рассчитывается по тарифу перевозчика. Админ скорректирует цену после оформления заказа.
              </Typography>
            </Stack>
          </Paper>
        </Grid>
      </Grid>
    </Paper>
  )
}