import { Head } from '@inertiajs/react';
import { ChartCandlestick } from 'lucide-react';
import {
    AppPage,
    AppPageHeader,
    AppPageTitleBlock,
} from '@/components/app-page';
import { Card, CardContent } from '@/components/ui/card';
import { dashboard } from '@/routes';

type Props = {
    image_url: string | null;
};

export default function ProviderClosingPage({ image_url }: Props) {
    return (
        <>
            <Head title="Operativa VT Markets Ultima Markets" />

            <AppPage width="narrow">
                <AppPageHeader>
                    <AppPageTitleBlock
                        title="Operativa VT Markets Ultima Markets"
                        description="Captura del último cierre publicada por el equipo. Toca la imagen para verla en tamaño completo."
                    />
                </AppPageHeader>

                {image_url ? (
                    <a
                        className="block overflow-hidden rounded-xl border bg-muted/30"
                        href={image_url}
                        rel="noopener"
                        target="_blank"
                    >
                        <img
                            alt="Operativa VT Markets Ultima Markets"
                            className="mx-auto w-full max-w-xl object-contain"
                            src={image_url}
                        />
                    </a>
                ) : (
                    <Card>
                        <CardContent className="flex flex-col items-center gap-3 py-12 text-center">
                            <ChartCandlestick
                                className="size-10 text-muted-foreground"
                                aria-hidden
                            />
                            <p className="text-muted-foreground">
                                Todavía no hay un cierre publicado. Vuelve a
                                consultar más tarde.
                            </p>
                        </CardContent>
                    </Card>
                )}
            </AppPage>
        </>
    );
}

ProviderClosingPage.layout = {
    breadcrumbs: [
        { title: 'Inicio', href: dashboard() },
        {
            title: 'Operativa VT Markets Ultima Markets',
            href: '/cierre-proveedor',
        },
    ],
};
