import * as React from 'react';
import { useTranslation } from '../hooks/useI18n';

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

const ShortLinks: React.FC<ShortLinksProps> = ({ slug, onUpdateSlug }) => {
    const { t } = useTranslation();
    return (
        <div className="p-8 max-w-4xl mx-auto">
            <header className="mb-8">
                <h2 className="text-3xl font-bold text-gray-900 dark:text-white">{t('seo.short_links.title')}</h2>
                <p className="text-gray-500 dark:text-gray-400 mt-1">{t('seo.short_links.subtitle')}</p>
            </header>
            <div className="space-y-8">
                <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm">
                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">{t('seo.short_links.your_url')}</h3>
                    <p className="text-gray-500 dark:text-gray-400 mb-2">{t('seo.short_links.your_url_desc')}</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">
                            {t('save')}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ShortLinks;