import * as React from 'react';

interface LinksDomainsProps {
    slug: string;
    onUpdateSlug: (newSlug: string) => void;
}

const LinksDomains: React.FC<LinksDomainsProps> = ({ slug, onUpdateSlug }) => {
    const [customDomain, setCustomDomain] = React.useState('');

    return (
        <div className="p-6 max-w-4xl mx-auto">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">Links & Custom Domains</h2>
            <div className="space-y-8">
                <div className="bg-white dark:bg-gray-800 p-6 rounded-lg">
                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Your GreenPage URL</h3>
                    <p className="text-gray-500 dark:text-gray-400 mb-2">This is your main link that you can share anywhere.</p>
                    <div className="flex items-center bg-gray-100 dark:bg-gray-700 rounded-md">
                        <span className="px-4 text-gray-400 dark:text-gray-400">greenpage.ai/</span>
                        <input
                            type="text"
                            value={slug}
                            onChange={(e) => onUpdateSlug(e.target.value)}
                            className="flex-1 bg-transparent p-3 text-gray-900 dark:text-white focus:outline-none"
                        />
                        <button className="bg-brand-primary text-white font-semibold py-2 px-4 rounded-r-md hover:bg-brand-secondary transition-colors">
                            Save
                        </button>
                    </div>
                </div>

                <div className="bg-white dark:bg-gray-800 p-6 rounded-lg">
                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Connect a Custom Domain</h3>
                    <p className="text-gray-500 dark:text-gray-400 mb-2">Use your own domain for a more professional look (e.g., links.yourcompany.com).</p>
                    <div className="flex items-center bg-gray-100 dark:bg-gray-700 rounded-md">
                        <input
                            type="text"
                            value={customDomain}
                            onChange={(e) => setCustomDomain(e.target.value)}
                            placeholder="your-domain.com"
                            className="w-full bg-transparent p-3 text-gray-900 dark:text-white focus:outline-none rounded-md"
                        />
                    </div>
                    <button className="mt-4 w-full md:w-auto bg-brand-primary text-white font-semibold py-2 px-5 rounded-md hover:bg-brand-secondary transition-colors">
                        Connect Domain
                    </button>
                    <p className="text-xs text-gray-400 dark:text-gray-500 mt-4">You'll need to update your DNS records after connecting. We'll provide the instructions.</p>
                </div>
            </div>
        </div>
    );
};

export default LinksDomains;