'use client';

import { BookText, Sparkles } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import { useI18n } from '@/lib/i18n';

export function ProUpgradePrompt() {
  const { t } = useI18n();
  return (
    <div className="flex items-center justify-center min-h-[60vh] p-6">
      <Card className="max-w-md w-full border-border/50 bg-gradient-to-br from-card via-card to-accent/5">
        <CardHeader className="text-center pb-4">
          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-accent/20 to-accent/5">
            <BookText className="h-8 w-8 text-accent" />
          </div>
          <CardTitle className="text-2xl font-semibold">{t('glossaries.upgrade.title')}</CardTitle>
          <CardDescription className="text-base">
            {t('glossaries.upgrade.description')}
          </CardDescription>
        </CardHeader>
        <CardContent className="text-center space-y-6">
          <div className="space-y-3">
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Sparkles className="h-4 w-4 text-accent shrink-0" />
              <span>{t('glossaries.upgrade.feature1')}</span>
            </div>
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Sparkles className="h-4 w-4 text-accent shrink-0" />
              <span>{t('glossaries.upgrade.feature2')}</span>
            </div>
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Sparkles className="h-4 w-4 text-accent shrink-0" />
              <span>{t('glossaries.upgrade.feature3')}</span>
            </div>
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Sparkles className="h-4 w-4 text-accent shrink-0" />
              <span>{t('glossaries.upgrade.feature4')}</span>
            </div>
          </div>
          
          <div className="pt-2">
            <p className="text-sm text-muted-foreground mb-4">
              {t('glossaries.upgrade.proFeatureBefore')}<span className="text-accent font-medium">{t('glossaries.upgrade.proLabel')}</span>{t('glossaries.upgrade.proFeatureAfter')}
            </p>
            <Button asChild className="w-full bg-accent hover:bg-accent/90">
              <Link href="/pricing">
                {t('glossaries.upgrade.upgradeBtn')}
              </Link>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
