'use client'

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { XCircle } from 'lucide-react'
import Link from 'next/link'

export default function CreditTopupCancel() {
  return (
    <div className="container mx-auto py-8 px-4">
      <Card className="max-w-md mx-auto">
        <CardHeader className="text-center">
          <div className="flex justify-center mb-4">
            <XCircle className="h-16 w-16 text-red-500" />
          </div>
          <CardTitle className="text-red-600">Payment Cancelled</CardTitle>
          <CardDescription>
            Your credit top-up was cancelled
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-center text-muted-foreground">
            No charges were made to your account. You can try again or choose a different payment method.
          </p>
          <Link href="/credits" className="w-full">
            <Button className="w-full">Try Again</Button>
          </Link>
          <Link href="/prompts" className="w-full">
            <Button variant="outline" className="w-full">Back to Prompts</Button>
          </Link>
        </CardContent>
      </Card>
    </div>
  )
}