import { useTranslation } from '@/hooks/use-translation';
import { Link } from '@inertiajs/react';
import { Mail } from 'lucide-react';

export function WhatsAppIcon({ className }: { className?: string }) {
    return (
        <svg viewBox="0 0 24 24" fill="#25D366" className={className} aria-hidden="true">
            <path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.87 9.87 0 0 0 4.74 1.21h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm0 18.13h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.11.82.83-3.04-.2-.31a8.18 8.18 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.24-8.23 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.7 8.23-8.24 8.23Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.39.11-.51.11-.11.25-.29.37-.43.13-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.35-.77-1.85-.2-.48-.4-.42-.56-.43h-.48c-.17 0-.43.06-.66.31-.23.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.11-.22-.17-.47-.29Z" />
        </svg>
    );
}

/**
 * Two-link channel switch shown at the top of both newsletter pages. Email and WhatsApp are
 * now distinct routes (/newsletters and /newsletters/whatsapp); this just highlights the active one.
 */
export default function ChannelSwitch({ active }: { active: 'email' | 'whatsapp' }) {
    const { t } = useTranslation();

    const base = 'inline-flex items-center gap-2 rounded-md px-4 py-1.5 text-sm font-medium transition-colors';
    const on = 'bg-secondary text-secondary-foreground shadow-sm';
    const off = 'text-muted-foreground hover:bg-muted';

    return (
        <div className="mb-4 inline-flex gap-1 rounded-lg border bg-card p-1">
            <Link href={route('newsletters')} className={`${base} ${active === 'email' ? on : off}`}>
                <Mail className="h-4 w-4" />
                {t('newsletters', 'email')}
            </Link>
            <Link href={route('newsletters.whatsapp')} className={`${base} ${active === 'whatsapp' ? on : off}`}>
                <WhatsAppIcon className="h-4 w-4" />
                {t('newsletters', 'whatsapp')}
            </Link>
        </div>
    );
}