import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Mail } from 'lucide-react'

export default function VerifyEmailPage() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader className="text-center">
        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-brand-teal/10">
          <Mail className="h-6 w-6 text-brand-teal" />
        </div>
        <CardTitle className="text-xl">Check your email</CardTitle>
        <CardDescription className="text-base">
          We&apos;ve sent you a magic link to sign in
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4 text-center">
        <p className="text-sm text-muted-foreground">
          Click the link in your email to complete the sign-in process.
          The link will expire in 15 minutes.
        </p>
        <p className="text-xs text-muted-foreground">
          Didn&apos;t receive an email? Check your spam folder or try again.
        </p>
      </CardContent>
    </Card>
  )
}