import { Award, CircleCheck } from 'lucide-react'
import { Card, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'

export function UpgradeCard() {
  return (
    <Card className="bg-gradient-to-br from-primary to-violet-600 border-0 text-white">
      <CardContent className="p-6">
        <div className="flex items-center gap-3 mb-4">
          <Award className="w-8 h-8" />
          <div>
            <h3 className="font-bold text-xl">Upgrade to Premium</h3>
            <p className="text-white/80 text-sm">Unlock all features</p>
          </div>
        </div>

        <ul className="space-y-2 mb-6">
          <li className="flex items-center gap-2 text-sm">
            <CircleCheck className="w-4 h-4" />
            <span>Priority Support</span>
          </li>
          <li className="flex items-center gap-2 text-sm">
            <CircleCheck className="w-4 h-4" />
            <span>Unlimited Revisions</span>
          </li>
          <li className="flex items-center gap-2 text-sm">
            <CircleCheck className="w-4 h-4" />
            <span>Dedicated Account Manager</span>
          </li>
        </ul>

        <Button className="w-full bg-white text-primary hover:bg-white/90 font-bold">
          Upgrade Now
        </Button>
      </CardContent>
    </Card>
  )
}