import { Menu, Stack, Typography, Box, Button } from '@mui/material';
import { blue } from '@mui/material/colors';
import { Icon } from '@rkheftan/harmony-ui';
import { ArrowLeft, ArrowRight } from 'iconsax-react';
import { useTranslation } from 'react-i18next';
import { productsData } from '@/data/products';

// --- Props Interface ---
interface ProductsMenuProps {
  anchorEl: Element | null;
  open: boolean;
  onClose: () => void;
}

export default function ProductsMenu({
  anchorEl,
  open,
  onClose,
}: ProductsMenuProps) {
  const { t, i18n } = useTranslation('setting');

  return (
    <Menu
      id="products-menu"
      anchorEl={anchorEl}
      open={open}
      onClose={onClose}
      anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'center',
      }}
      transformOrigin={{
        vertical: 'top',
        horizontal: i18n.dir() === 'rtl' ? 'left' : 'right',
      }}
      sx={{
        '& .MuiMenu-list': {
          py: 0,
        },
        '& .MuiPaper-root': {
          borderRadius: 2,
          width: 376,
        },
      }}
    >
      {/* 1. Header Link */}
      <Box sx={{ px: 2, py: 1, bgcolor: blue[50] }}>
        <Typography variant="body2" color="primary.main">
          {t('products.menu.title')}
        </Typography>
      </Box>

      <Box sx={{ px: 2, py: 1 }}>
        {/* 2. Map through products to create MenuItems */}
        {productsData.map((product) => (
          <Stack
            key={product.id}
            direction="row-reverse"
            spacing={2}
            alignItems="center"
            width="100%"
          >
            {/* Text Content */}
            <Stack minWidth={0} direction="column" spacing={0.5} flexGrow={1}>
              <Typography variant="h6">{t(product.titleKey)}</Typography>
              <Typography variant="body2" color="text.secondary">
                {t(product.descriptionKey)}
              </Typography>
              <Button
                type="link"
                href={product.demoLink}
                variant="text"
                color="club"
                endIcon={
                  <Icon
                    Component={i18n.dir() === 'ltr' ? ArrowRight : ArrowLeft}
                  />
                }
                sx={{
                  alignSelf: 'flex-start',
                  width: 'unset',
                }}
              >
                {t('products.menu.getDemo')}
              </Button>
            </Stack>

            <Box sx={{ width: 69 }}>{product.LogoComponent}</Box>
          </Stack>
        ))}
      </Box>
    </Menu>
  );
}
