import type { PrereleaseUpgradeResponse } from '~/lib/songwhipApi/types';
import type { NotificationType } from '~/src/components/Notification';
import type { WithSpacingProps } from '~/src/lib/hocs/withSpacing';

import locales from '~/locales/fragments/presave';
import Box from '~/src/components/Box';
import Notification from '~/src/components/Notification';
import Text from '~/src/components/Text';
import { useI18nStatic } from '~/src/lib/i18n';
import { formatValidationMessage } from '../utils';

export const PrereleaseIssues = ({
  issues,
  type,
  title,
  ...spacingProps
}: {
  issues: PrereleaseUpgradeResponse['errors'];
  type: NotificationType;
  title: string;
} & WithSpacingProps) => {
  const { t } = useI18nStatic<'presave'>(locales);

  return (
    <Box
      flexColumn
      gap="2rem"
      {...spacingProps}
      style={{ textAlign: 'left', fontSize: '1.4rem', ...spacingProps.style }}
    >
      <Notification
        type={type}
        content={
          <Box flexColumn gap="1rem" style={{ fontSize: '1.4rem' }}>
            <Text isBold>{title}</Text>
            <Box tag="ul">
              {issues.map((issue) => (
                <Text
                  key={`${issue.code}-${issue.message}`}
                  tag="li"
                  style={{ listStyle: 'disc outside', marginLeft: '2rem' }}
                >
                  {formatValidationMessage(t, issue)}
                </Text>
              ))}
            </Box>
          </Box>
        }
      />
    </Box>
  );
};