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

const Banner = styled.div`
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: ${({ theme }) => theme.spacing[4]};
  padding: ${({ theme }) => theme.spacing[4]} ${({ theme }) => theme.spacing[5]};
  border-radius: ${({ theme }) => theme.borderRadius.lg};
  border: 1px solid ${({ theme }) => theme.colors.primary}33;
  background: linear-gradient(
    135deg,
    ${({ theme }) => theme.colors.primary}12 0%,
    ${({ theme }) => theme.colors.surface} 100%
  );
  margin-bottom: ${({ theme }) => theme.spacing[6]};
`;

const TextBlock = styled.div`
  text-align: start;
  min-width: 0;
`;

const Title = styled.h2`
  margin: 0 0 ${({ theme }) => theme.spacing[1]};
  font-size: ${({ theme }) => theme.typography.fontSize.lg};
  font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
`;

const Subtitle = styled.p`
  margin: 0;
  color: ${({ theme }) => theme.colors.text.secondary};
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
`;

export interface WelcomeBannerProps {
  onResume?: () => void;
  onDismiss?: () => void;
  showResume?: boolean;
}

export const WelcomeBanner: React.FC<WelcomeBannerProps> = ({
  onResume,
  onDismiss,
  showResume = false,
}) => {
  const { t } = useLocale();

  return (
    <Banner>
      <TextBlock>
        <Title>{t('onboarding:welcome.title')}</Title>
        <Subtitle>{t('onboarding:welcome.subtitle')}</Subtitle>
      </TextBlock>
      <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
        {showResume && onResume && (
          <Button variant="primary" size="sm" onClick={onResume}>
            {t('onboarding:welcome.resume')}
          </Button>
        )}
        {onDismiss && (
          <Button variant="secondary" size="sm" onClick={onDismiss}>
            {t('onboarding:welcome.dismiss')}
          </Button>
        )}
      </div>
    </Banner>
  );
};