import { useTranslation } from '@/i18n'
import { Card, CardContent } from '@/components/ui/card'
import { Ic } from '@/icons'

export function NotificationsTab() {
  const { t } = useTranslation()

  return (
    <Card className="border-border-soft bg-card/40 shadow-xs">
      <CardContent className="p-8 sm:p-12 text-center max-w-xl mx-auto space-y-4">
        <div className="size-16 rounded-3xl bg-primary/10 text-primary flex items-center justify-center mx-auto shadow-inner">
          <Ic name="bell" className="size-8" />
        </div>

        <div className="space-y-2">
          <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-amber-500/15 text-amber-600 dark:text-amber-400 border border-amber-500/25">
            <span className="size-2 rounded-full bg-amber-500 animate-pulse" />
            <span>{t('navigation.soon')}</span>
          </div>

          <h3 className="text-lg font-black text-foreground">
            {t('settings.notificationsTabTitle')}
          </h3>

          <p className="text-xs sm:text-sm text-muted-foreground leading-relaxed">
            {t('settings.notificationsTabDesc')}
          </p>
        </div>

        <div className="p-4 rounded-2xl bg-muted/40 border border-border-soft text-start space-y-2 text-xs text-muted-foreground">
          <div className="flex items-center gap-2 font-bold text-foreground">
            <Ic name="sparkles" className="size-4 text-primary" />
            <span>{t('settings.notificationsUpcomingFeaturesTitle')}</span>
          </div>
          <ul className="list-disc list-inside space-y-1 ps-1 text-[11px] sm:text-xs">
            <li>{t('settings.notificationsFeature1')}</li>
            <li>{t('settings.notificationsFeature2')}</li>
            <li>{t('settings.notificationsFeature3')}</li>
          </ul>
        </div>
      </CardContent>
    </Card>
  )
}