import { useState } from 'react';
import { Search } from 'lucide-react';

const AnalysisSearch = () => {
  const [aiq, setAiq] = useState('10');
  const [website, setWebsite] = useState('mysite.com');

  const handleAnalyze = () => {
    console.log('Analyzing:', { aiq, website });
  };

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
      <div className="max-w-4xl mx-auto">
        <div className="flex flex-col md:flex-row items-center gap-4">
          <div className="flex items-center gap-3 bg-gray-50 rounded-xl px-6 py-4 border-2 border-gray-200">
            <label htmlFor="aiq" className="text-gray-700 font-medium">
              AIQ
            </label>
            <input
              id="aiq"
              type="number"
              value={aiq}
              onChange={(e) => setAiq(e.target.value)}
              className="w-16 text-center bg-transparent text-xl font-semibold text-gray-900 focus:outline-none"
              min="1"
              max="100"
            />
          </div>

          <div className="flex-1 w-full md:w-auto relative">
            <input
              type="text"
              value={website}
              onChange={(e) => setWebsite(e.target.value)}
              placeholder="Enter website URL"
              className="w-full px-6 py-4 bg-gray-50 border-2 border-gray-200 rounded-xl text-gray-900 font-medium focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition-all"
            />
            <div className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400">
              <svg
                className="w-5 h-5"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M19 9l-7 7-7-7"
                />
              </svg>
            </div>
          </div>

          <button
            onClick={handleAnalyze}
            className="flex items-center gap-2 px-8 py-4 bg-white hover:bg-gray-100 text-gray-900 font-medium rounded-xl transition-all shadow-lg  active:scale-95"
          >
            <Search className="w-5 h-5" />
            Analyze
          </button>
        </div>

        <div className="mt-6 flex items-center justify-center gap-2 text-sm text-gray-500">
          <div className="flex items-center gap-1">
            <span className="font-medium text-gray-700">AIQ Score:</span>
            <span>Measures AI visibility and authority</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AnalysisSearch;

