import React, { useState } from 'react';
import MorseCodeConverter from './components/MorseCodeConverter';
import LeetConverter from './components/LeetConverter';
import BinaryConverter from './components/BinaryConverter';
import Base64Converter from './components/Base64Converter';
import HexConverter from './components/HexConverter';
import BrowserView from './components/BrowserView';
import Tabs, { Tab } from './components/Tabs';

function App() {
  const [compoundedMessage, setCompoundedMessage] = useState('');

  const addToCompoundedMessage = (text) => {
    setCompoundedMessage((prev) => prev + text + ' ');
  };

  return (
    <div className="min-h-screen bg-black text-white flex flex-col items-center justify-center p-4 animate-slide-up">
      <div className="text-center mb-8">
        <h1 className="text-5xl md:text-7xl font-extrabold mb-2 text-transparent bg-clip-text animated-gradient gradient-text pulse-glow">
          T3XT TR4N5F0RM3R
        </h1>
        <p className="text-lg md:text-xl text-gray-300 animate-fade-in">
          Your one-stop tool for text conversions
        </p>
      </div>
      <div className="w-full max-w-5xl p-6 bg-black border-2 border-white rounded-2xl shadow-2xl hover-glow card-hover transition-all duration-300">
        <Tabs>
          <Tab label="Morse Code">
            <MorseCodeConverter addToMessage={addToCompoundedMessage} />
          </Tab>
          <Tab label="Leet Speak">
            <LeetConverter addToMessage={addToCompoundedMessage} />
          </Tab>
          <Tab label="Binary">
            <BinaryConverter addToMessage={addToCompoundedMessage} />
          </Tab>
          <Tab label="Base64">
            <Base64Converter addToMessage={addToCompoundedMessage} />
          </Tab>
          <Tab label="Hex">
            <HexConverter addToMessage={addToCompoundedMessage} />
          </Tab>
          <Tab label="Browser">
            <BrowserView />
          </Tab>
        </Tabs>
      </div>

      <div className="w-full max-w-5xl p-6 mt-8 bg-black border-2 border-white rounded-2xl shadow-2xl hover-glow card-hover transition-all duration-300">
        <h2 className="text-2xl font-bold mb-4 text-white">Compounded Message</h2>
        <textarea
          className="w-full h-48 p-4 bg-black border border-white rounded-md text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-300"
          value={compoundedMessage}
          readOnly
          placeholder="Your compounded message will appear here..."
        />
        <button
          className="mt-4 px-6 py-3 bg-invader-pink hover:bg-invader-green rounded-md text-black font-semibold transition-all duration-300 hover:shadow-lg active:scale-95"
          onClick={() => navigator.clipboard.writeText(compoundedMessage)}
        >
          Copy Compounded Message
        </button>
      </div>

      <footer className="mt-8 text-center text-gray-500">
        <p>
          Made with ❤️ by{' '}
          <a
            href="https://github.com/your-github"
            target="_blank"
            rel="noopener noreferrer"
            className="text-invader-green hover:text-invader-pink transition-colors duration-300 hover:underline"
          >
            Your Name
          </a>
        </p>
      </footer>
    </div>
  );
}

export default App;