components/AccountLinking.jsx

import React, { useState } from 'react';
import { Facebook, Twitter, Instagram, Linkedin, AlertCircle } from 'lucide-react';

const AccountLinking = () => {
  const [platform, setPlatform] = useState('');
  const [username, setUsername] = useState('');

  const handleLink = async () => {
    // Here we would integrate with the chosen platform's API
    // For now, just demonstrate the flow
    alert(`Linking ${username} on ${platform}`);
  };

  return (
    <div className="max-w-2xl mx-auto p-6 bg-white rounded-lg shadow">
      <h2 className="text-xl font-semibold mb-4">Link Social Media Account</h2>
      
      <div className="grid grid-cols-2 gap-4 mb-6">
        <button 
          onClick={() => setPlatform('facebook')}
          className={`p-4 border rounded-lg flex items-center gap-2 ${platform === 'facebook' ? 'border-blue-500 bg-blue-50' : ''}`}
        >
          <Facebook className="text-blue-600" />
          Facebook
        </button>
        <button 
          onClick={() => setPlatform('twitter')}
          className={`p-4 border rounded-lg flex items-center gap-2 ${platform === 'twitter' ? 'border-blue-500 bg-blue-50' : ''}`}
        >
          <Twitter className="text-blue-400" />
          Twitter
        </button>
        <button 
          onClick={() => setPlatform('instagram')}
          className={`p-4 border rounded-lg flex items-center gap-2 ${platform === 'instagram' ? 'border-blue-500 bg-blue-50' : ''}`}
        >
          <Instagram className="text-pink-600" />
          Instagram
        </button>
        <button 
          onClick={() => setPlatform('linkedin')}
          className={`p-4 border rounded-lg flex items-center gap-2 ${platform === 'linkedin' ? 'border-blue-500 bg-blue-50' : ''}`}
        >
          <Linkedin className="text-blue-700" />
          LinkedIn
        </button>
      </div>

      {platform && (
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-1">Username</label>
            <input 
              type="text"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              className="w-full p-2 border rounded"
              placeholder={`Enter your ${platform} username`}
            />
          </div>
          
          <div className="bg-blue-50 p-4 rounded-lg flex items-start gap-2">
            <AlertCircle className="text-blue-500 mt-1" size={20} />
            <p className="text-sm text-blue-700">
              We'll monitor this account for inactivity. Make sure the profile is public so we can track activity.
            </p>
          </div>

          <button 
            onClick={handleLink}
            disabled={!username}
            className="w-full bg-blue-600 text-white p-3 rounded-lg hover:bg-blue-700 disabled:opacity-50"
          >
            Link Account
          </button>
        </div>
      )}
    </div>
  );
};

export default AccountLinking;