'use client';

import { observer } from 'mobx-react-lite';

import Modal from '@/components/modal/Modal';
import useDeviceAttributes from '@/hooks/useDeviceAttributes';

export interface FailedModerationModalProps {
  isOpen: boolean;
  onClose: () => void;
  contentRatingTag?: string;
}

export const FailedModerationModal = observer(
  ({ isOpen, onClose, contentRatingTag }: FailedModerationModalProps) => {
    const { isMobile } = useDeviceAttributes();

    return !isOpen ? null : (
      <Modal
        onClose={onClose}
        wrapperClasses={`h-auto ${isMobile ? 'fixed bottom-0 left-0  right-0 z-50 rounded-t-[32px] bg-background-secondary px-4' : ''}`}
        closeButtonClasses={`absolute right-0 top-0 z-200000`}
        width={380}
        showCloseButton={false}
      >
        <div className='items-center text-center'>
          <h2 className='text-[18px] leading-[24px] font-semibold tracking-[0.36px] text-foreground-primary not-italic'>
            Video Failed to Post
          </h2>

          {contentRatingTag && (
            <p className='mt-[8px] text-[16px] leading-[24px] font-normal tracking-[0.32px] text-foreground-secondary not-italic'>
              Reason:{' '}
              <span className='font-semibold text-foreground-primary'>
                {contentRatingTag}
              </span>
            </p>
          )}

          <p className='mt-[24px] text-[16px] leading-[24px] font-normal tracking-[0.32px] text-foreground-secondary not-italic'>
            The content did not comply with our posting{' '}
            <a
              href='https://suno.com/community-guidelines'
              target='_blank'
              rel='noopener noreferrer'
              className='text-accent-primary hover:text-accent-primary-hover font-semibold underline'
            >
              guidelines
            </a>
            . If you think this was an error, please email{' '}
            <a
              href='mailto:support@suno.com'
              className='text-accent-primary hover:text-accent-primary-hover font-semibold underline'
            >
              support@suno.com
            </a>
          </p>

          <button
            onClick={onClose}
            className='hover:bg-background-quaternary mt-4 w-full cursor-pointer rounded-lg bg-background-tertiary px-[16px] py-[12px] font-medium text-foreground-primary transition-colors'
          >
            Close
          </button>
        </div>
      </Modal>
    );
  }
);