import Box from '@material-hu/mui/Box';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

type SidebarSectionProps = {
  title: string;
  children: React.ReactNode;
};

export function SidebarSection({ title, children }: SidebarSectionProps) {
  return (
    <Stack sx={{ gap: 1 }}>
      <Typography
        variant="globalM"
        fontWeight="fontWeightSemiBold"
        sx={{ color: ({ palette }) => palette.new.text.neutral.default }}
      >
        {title}
      </Typography>
      <Box
        sx={{
          backgroundColor: ({ palette }) =>
            palette.new.background.layout.default,
          borderRadius: 2,
          padding: 2,
        }}
      >
        {children}
      </Box>
    </Stack>
  );
}

type DetailRowProps = {
  label: string;
  children?: React.ReactNode;
  value?: string | null;
};

export function DetailRow({ label, children, value }: DetailRowProps) {
  return (
    <Box
      sx={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        py: 0.75,
      }}
    >
      <Typography
        variant="globalS"
        fontWeight="fontWeightSemiBold"
        sx={{ color: ({ palette }) => palette.new.text.neutral.default }}
      >
        {label}
      </Typography>
      <Box sx={{ textAlign: 'right' }}>
        {children ?? (
          <Typography
            variant="globalS"
            sx={{ color: ({ palette }) => palette.new.text.neutral.default }}
          >
            {value ?? '—'}
          </Typography>
        )}
      </Box>
    </Box>
  );
}