import { FC } from 'react';

import Grid from '@material-hu/mui/Grid';
import Stack from '@material-hu/mui/Stack';

import HuTitle from '@material-hu/components/design-system/Title';
import { useMobile } from 'src/contexts/MobileContext';
import { useLokaliseTranslation } from 'src/utils/i18n';

type GridProps = {
  data: { label: string; value?: any }[];
};

const BanBajioGrid: FC<GridProps> = ({ data }) => {
  const { isMobile } = useMobile();
  const { t } = useLokaliseTranslation('banbajio');
  return (
    <Grid
      container
      columns={isMobile ? 1 : 2}
      spacing={2}
      sx={{ width: '100%', mx: 'auto' }}
    >
      {data.map((detail, index) => (
        <Grid
          key={detail.label}
          item
          xs={1}
          sx={isMobile || index % 2 === 0 ? { pl: '0 !important' } : undefined}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
              gap: 2,
              backgroundColor: ({ palette }) =>
                palette.new.background.layout.default,
              borderRadius: 1,
              py: 1,
              px: 1.5,
            }}
          >
            <HuTitle
              variant="S"
              title={t(detail.label)}
            />
            {typeof detail.value === 'string' ? (
              <HuTitle
                variant="S"
                title={detail.value || '—'}
                slotProps={{
                  title: {
                    sx: { fontWeight: 'regular', textAlign: 'right' },
                  },
                }}
              />
            ) : (
              detail.value
            )}
          </Stack>
        </Grid>
      ))}
    </Grid>
  );
};

export default BanBajioGrid;