import React from 'react';
import { useTranslation } from 'react-i18next';

const SocialConnectError: React.FC = () => {
  const { t } = useTranslation();

  const searchParams = new URLSearchParams(window.location.search);
  const platform = searchParams.get('platform') || 'unknown';
  const errorMessage = searchParams.get('error') || t('social.connectError.defaultError');

  const platformName = platform === 'youtube' ? 'YouTube' :
                       platform === 'instagram' ? 'Instagram' :
                       platform === 'facebook' ? 'Facebook' : platform;

  const navigateToHome = () => {
    window.location.href = '/';
  };

  return (
    <div className="social-connect-page">
      <div className="social-connect-card error">
        <div className="social-connect-icon error">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <circle cx="12" cy="12" r="10" />
            <line x1="15" y1="9" x2="9" y2="15" />
            <line x1="9" y1="9" x2="15" y2="15" />
          </svg>
        </div>
        <h1 className="social-connect-title">{t('social.connectError.title', { platform: platformName })}</h1>
        <p className="social-connect-message">
          {errorMessage}
        </p>
        <p className="social-connect-detail">
          {t('social.connectError.detail')}
        </p>
        <div className="social-connect-actions">
          <button
            onClick={navigateToHome}
            className="social-connect-button"
          >
            {t('social.connectError.retry')}
          </button>
        </div>
      </div>
    </div>
  );
};

export default SocialConnectError;