import { Head } from '@inertiajs/react';
import Heading from '@/components/heading';
import PostForm, { type PostItem, type TaxonomyOption } from './post-form';

type PageProps = {
    post: PostItem;
    postCategories: TaxonomyOption[];
    tags: TaxonomyOption[];
};

export default function EditPost({ post, postCategories, tags }: PageProps) {
    return (
        <>
            <Head title={`Edit ${post.title}`} />

            <div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4">
                <Heading
                    title="Edit post"
                    description="Update post metadata and formatted content."
                />

                <div className="rounded-lg border">
                    <PostForm
                        post={post}
                        postCategories={postCategories}
                        tags={tags}
                    />
                </div>
            </div>
        </>
    );
}

EditPost.layout = {
    breadcrumbs: [
        {
            title: 'Posts',
            href: '/posts',
        },
        {
            title: 'Edit post',
            href: '#',
        },
    ],
};
