'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';

export function ProUpgradePrompt() {
  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">Glossaries</CardTitle>
          <CardDescription className="text-base">
            Customize your translations with custom terminology
          </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>Create multiple glossaries</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>Define source→target term pairs</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>Import/export via CSV</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>Apply to LLM translations</span>
            </div>
          </div>
          
          <div className="pt-2">
            <p className="text-sm text-muted-foreground mb-4">
              Glossaries are a <span className="text-accent font-medium">Pro</span> feature.
              Upgrade to unlock custom terminology.
            </p>
            <Button asChild className="w-full bg-accent hover:bg-accent/90">
              <Link href="/pricing">
                Upgrade to Pro
              </Link>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}