import { Head } from '@inertiajs/react';
import Heading from '@/components/heading';
import ProductForm, { type Product, type ProductOption } from './product-form';

type PageProps = {
    brands: ProductOption[];
    categories: ProductOption[];
    product: Product;
    stores: ProductOption[];
};

export default function EditProduct({
    brands,
    categories,
    product,
    stores,
}: PageProps) {
    return (
        <>
            <Head title={`Edit ${product.name}`} />

            <div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4">
                <Heading
                    title="Edit product"
                    description="Update product details, feature image, and variations."
                />

                <div className="rounded-lg border">
                    <ProductForm
                        brands={brands}
                        categories={categories}
                        product={product}
                        stores={stores}
                    />
                </div>
            </div>
        </>
    );
}

EditProduct.layout = {
    breadcrumbs: [
        {
            title: 'Products',
            href: '/products',
        },
        {
            title: 'Edit product',
            href: '#',
        },
    ],
};
