'use client'
import Link from 'next/link'
import { useTranslation } from 'react-i18next'

function cx(...classes: Array<string | false | null | undefined>) {
    return classes.filter(Boolean).join(' ')
}

export default function Footer({ className }: { className?: string }) {
    const year = new Date().getFullYear()
    const { t } = useTranslation()

    return (
        <footer className={cx('border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0c0d0e]', className)}>
            <div className="mx-auto w-full max-w-6xl px-4 py-6 text-sm text-gray-600 dark:text-gray-400">
                <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                    <div className="space-y-1">
                        <p className="text-gray-900 dark:text-white font-semibold">{t('common.brand')}</p>
                        <p>{t('footer.rights', { year })}</p>
                    </div>
                    <div className="flex flex-wrap gap-4">
                        <Link className="hover:text-primary-600 dark:hover:text-primary-400 transition-colors" href="/privacy">
                            {t('common.privacy')}
                        </Link>
                        <Link className="hover:text-primary-600 dark:hover:text-primary-400 transition-colors" href="/terms">
                            {t('common.terms')}
                        </Link>
                    </div>
                </div>
            </div>
        </footer>
    )
}