import { Head } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import AppLogoIcon from '@/components/app-logo-icon';

type Meeting = {
    uuid: string;
    title: string;
};

type Props = {
    meeting: Meeting;
};

export default function JoinLeft({ meeting }: Props) {
    return (
        <>
            <Head title="Lezione terminata - EasyForma" />

            <div className="bg-background flex min-h-screen flex-col items-center justify-center gap-6 p-6 md:p-10">
                <div className="flex w-full max-w-md flex-col gap-6">
                    {/* Header with Logo */}
                    <div className="flex items-center gap-2 self-center">
                        <div className="flex h-9 w-9 items-center justify-center">
                            <AppLogoIcon className="text-foreground size-9 fill-current" />
                        </div>
                    </div>

                    {/* Main Card */}
                    <Card className="rounded-xl">
                        <CardHeader className="px-10 pt-8 pb-0 text-center">
                            <CardTitle className="text-xl">
                                Lezione terminata
                            </CardTitle>
                        </CardHeader>

                        <CardContent className="px-10 py-8 text-center">
                            <div className="space-y-6">
                                <p className="text-muted-foreground">
                                    Hai lasciato la lezione «{meeting.title}
                                    ». Puoi chiudere questa finestra.
                                </p>

                                <Button asChild className="w-full">
                                    <a href={`/m/${meeting.uuid}`}>
                                        Torna alla pagina lezione
                                    </a>
                                </Button>
                            </div>
                        </CardContent>
                    </Card>
                </div>
            </div>
        </>
    );
}
