jsimport React from "react";

import {notFound} from "next/navigation";
import {fetchComponent} from "@/app/lib/data";
import {Component, Permission} from "@/app/lib/types";
import {ComponentDetails} from "@/app/ui/components/component/details";
import {ComponentRevision, RevisionComments, RevisionDetails} from "@/app/ui/components/component/revision";

export default async function Page({params}: { params: { name: string, id: string } }) {
    const data = params.name;
    const name = data.split('%40')[0]
    const revisionId = params.id;
    const version = data.split('%40')[1];
    if (isNaN(Number(version))) notFound();

    const payload = await fetchComponent(name, parseInt(version)) as any;

    if (!payload) notFound();

    let permission = payload.permission as Permission
    let component = payload.data as Component;

    let revision = component.revisions.find((r) => r.id === revisionId);
    if(!revision) return notFound();

    return (<div className='min-h-[calc(100vh-100px)] relative w-full'>
        <div className='grid gap-6 lg:grid-cols-4 relative'>
            <ComponentRevision revision={revision} component={component} permission={permission}/>
            <ComponentDetails revision={revision} component={component} permission={permission}>
                <RevisionDetails permission={permission} revision={revision}/>
                <RevisionComments revision={revision} component={component}/>
            </ComponentDetails>
        </div>
    </div>)
}

'use client'

export default function Error({
                                  error,
                                  reset,
                              }: {
    error: Error & { digest?: string }
    reset: () => void
}) {
    return (
        <div className='min-h-[calc(100vh-100px)] flex items-center justify-center flex-col gap-2'>
            <h2>{error.message}</h2>
            <button
                className='text-primary underline'
                onClick={
                    () => reset()
                }
            >
                Try again
            </button>
        </div>
    )
}