import { type FC, type ReactNode } from 'react';

import { IconExclamationCircle } from '@material-hu/icons/tabler';
import Box from '@material-hu/mui/Box';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

type Props = {
  label: string;
  value: ReactNode;
  showDivider?: boolean;
  errorMessage?: string;
};

const RowItem: FC<Props> = ({
  label,
  value,
  showDivider = true,
  errorMessage,
}) => {
  const hasError = !!errorMessage;

  return (
    <>
      <Stack
        sx={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          py: 2,
          gap: 2,
        }}
      >
        <Box sx={{ flex: 1 }}>
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
            sx={{
              color: hasError
                ? ({ palette }) => palette.new.text.feedback.error
                : undefined,
            }}
          >
            {label}
          </Typography>
        </Box>
        <Box
          sx={{
            flex: 1,
            alignItems: 'flex-end',
            flexDirection: 'row',
            justifyContent: 'flex-end',
            textAlign: 'right',
          }}
        >
          {!hasError ? (
            value
          ) : (
            <Stack
              sx={{
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'flex-end',
                gap: 0.5,
                color: ({ palette }) => palette.new.text.feedback.error,
              }}
            >
              <Typography
                variant="globalS"
                color="inherit"
              >
                {errorMessage}
              </Typography>
              <IconExclamationCircle size={16} />
            </Stack>
          )}
        </Box>
      </Stack>
      {showDivider && (
        <Divider
          sx={{
            borderColor: ({ palette }) => palette.new.border.neutral.default,
          }}
        />
      )}
    </>
  );
};

export default RowItem;