import React from 'react';
import { createPortal } from 'react-dom';
import styled from 'styled-components';
import { useLocale } from '@/app/providers/LocaleProvider';
import { Button } from '@/shared/components/ui';

const Bar = styled.div`
  position: fixed;
  bottom: ${({ theme }) => theme.spacing[6]};
  left: 50%;
  transform: translateX(-50%);
  z-index: ${({ theme }) => theme.zIndex.modal + 5};
  display: flex;
  align-items: center;
  gap: ${({ theme }) => theme.spacing[3]};
  padding: ${({ theme }) => theme.spacing[3]} ${({ theme }) => theme.spacing[5]};
  background: ${({ theme }) => theme.colors.surface};
  border: 1px solid ${({ theme }) => theme.colors.border};
  border-radius: ${({ theme }) => theme.borderRadius.lg};
  box-shadow: ${({ theme }) => theme.shadows.lg};
  max-width: min(480px, calc(100vw - 2rem));
`;

const Message = styled.span`
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  color: ${({ theme }) => theme.colors.text.secondary};
  text-align: start;
`;

interface WizardResumeBarProps {
  onResume: () => void;
}

export const WizardResumeBar: React.FC<WizardResumeBarProps> = ({ onResume }) => {
  const { t } = useLocale();

  return createPortal(
    <Bar role="status" aria-live="polite">
      <Message>{t('onboarding:wizard.resumeHint')}</Message>
      <Button variant="primary" size="sm" onClick={onResume}>
        {t('onboarding:wizard.resumeSetup')}
      </Button>
    </Bar>,
    document.body,
  );
};