import React from 'react';
import { PawPrint, Heart, Sparkles, Cat } from 'lucide-react';

interface GeneratorProps {
    url: string;
    setUrl: (val: string) => void;
    onGenerate: () => void;
}

export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate }) => (
    <div className="max-w-[800px] mx-auto pt-10 sm:pt-16 px-4 flex flex-col items-center">
        {/* Header - Skalowanie tekstu i ikony */}
        <header className="text-center mb-8 sm:mb-12">
            <h1 className="text-4xl sm:text-7xl font-black text-pink-500 mb-2 tracking-tighter flex items-center justify-center gap-2 sm:gap-4">
                KittyURL <PawPrint className="w-8 h-8 sm:w-12 sm:h-12" fill="currentColor" />
            </h1>
            <p className="text-pink-300 text-lg sm:text-xl font-medium px-4">
                Shorten KKKKKK your links with a purr!
            </p>
        </header>

        {/* Główna karta - mniejsze paddingi i zaokrąglenia na mobile */}
        <div className="w-full bg-white rounded-[2rem] sm:rounded-[3rem] shadow-2xl shadow-pink-200/50 p-6 sm:p-10 border-4 border-white relative overflow-hidden">
            <div className="mb-6">
                <label className="block text-[10px] sm:text-xs font-black uppercase tracking-widest text-pink-300 mb-3 ml-2">
                    Long URL to shorten
                </label>
                <div className="relative">
                    <input
                        type="url"
                        placeholder="https://example.com/very-long-url"
                        className="w-full p-4 sm:p-5 bg-pink-50/30 border-2 border-pink-100 rounded-xl sm:rounded-2xl outline-none focus:border-pink-400 focus:bg-white transition-all text-base sm:text-lg shadow-inner pr-12"
                        value={url}
                        onChange={(e) => setUrl(e.target.value)}
                    />
                    <Heart className="absolute right-4 top-1/2 -translate-y-1/2 text-pink-200 w-5 h-5 sm:w-6 sm:h-6" />
                </div>
            </div>

            <button
                onClick={onGenerate}
                className="w-full bg-pink-500 hover:bg-pink-600 text-white font-black py-4 sm:py-5 rounded-xl sm:rounded-[1.5rem] transition-all shadow-xl shadow-pink-100 active:scale-[0.98] text-lg sm:text-xl flex items-center justify-center gap-3 cursor-pointer"
            >
                <span className="hidden xs:inline">Generate Kitty Link</span>
                <span className="xs:hidden">Generate</span>
                <Sparkles className="w-5 h-5 sm:w-6 sm:h-6" />
            </button>
        </div>

        {/* Sekcja "No links yet" - Skalowanie paddingu i ikony */}
        <div className="w-full mt-10 sm:mt-16 text-center">
            <div className="bg-pink-100/50 rounded-[2rem] sm:rounded-[2.5rem] border-4 border-dashed border-pink-200 p-8 sm:p-12">
                <Cat className="mx-auto text-pink-200 mb-4 w-12 h-12 sm:w-16 sm:h-16" />
                <p className="text-pink-300 font-bold text-sm sm:text-base px-2">
                    No links generated yet. Feed me a URL! 🐾
                </p>
            </div>
        </div>
    </div>
);