import React from 'react';

const SocialConnectError: React.FC = () => {
  // URL 파라미터 파싱
  const searchParams = new URLSearchParams(window.location.search);
  const platform = searchParams.get('platform') || 'unknown';
  const errorMessage = searchParams.get('error') || '알 수 없는 오류가 발생했습니다.';

  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">{platformName} 연결 실패</h1>
        <p className="social-connect-message">
          {errorMessage}
        </p>
        <p className="social-connect-detail">
          다시 시도해주세요. 문제가 지속되면 고객 지원에 문의해주세요.
        </p>
        <div className="social-connect-actions">
          <button
            onClick={navigateToHome}
            className="social-connect-button"
          >
            다시 시도
          </button>
        </div>
      </div>
    </div>
  );
};

export default SocialConnectError;