import React from "react";
import Link from "next/link";
import { AlertCircle } from "lucide-react";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export const InvitationError: React.FC = () => {
    return (
        <Card className="mx-auto w-full max-w-md">
            <CardHeader>
                <div className="flex items-center space-x-2">
                    <AlertCircle className="text-destructive h-6 w-6" />

                    <CardTitle className="text-destructive text-xl">
                        Invitation Error
                    </CardTitle>
                </div>

                <CardDescription>
                    There was an issue with your invitation.
                </CardDescription>
            </CardHeader>

            <CardContent>
                <p className="text-muted-foreground mb-4 text-sm">
                    The invitation you&apos;re trying to access is either invalid or you don&apos;t have the correct permissions. Please check your email for a valid invitation or contact the person who sent it.
                </p>
            </CardContent>

            <CardFooter>
                <Link className="w-full" href="/">
                    <Button variant="outline" className="w-full">
                        Go back to home
                    </Button>
                </Link>
            </CardFooter>
        </Card>
    );
};