import { Typography, Box } from '@mui/material';
import { Campaign } from '@mui/icons-material';
import { useQuery } from '@tanstack/react-query';
import { bannerApi } from '../../services/banners';
import type { BannerLevel } from '../../types/banner.types';
import { WidgetCard } from '../templates/WidgetCard';

const SEVERITY_COLOR: Record<BannerLevel, string> = {
  info: '#1976d2',
  important: '#ed6c02',
  critical: '#d32f2f',
};

export default function BannerWidget() {
  const { data: banners = [] } = useQuery({
    queryKey: ['banners', 'active'],
    queryFn: bannerApi.getActive,
    refetchInterval: 60_000,
    retry: 1,
  });

  const widgetBanners = banners.filter(b => b.show_as === 'widget');

  if (widgetBanners.length === 0) return null;

  return (
    <WidgetCard
      title="Mitteilungen"
      icon={<Campaign />}
    >
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
        {widgetBanners.map(banner => (
          <Box
            key={banner.id}
            sx={{
              borderLeft: `4px solid ${SEVERITY_COLOR[banner.level]}`,
              pl: 2,
              py: 1,
            }}
          >
            <Typography variant="body2">
              {banner.message}
            </Typography>
          </Box>
        ))}
      </Box>
    </WidgetCard>
  );
}
