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

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

export default function CreateProduct({
    brands,
    categories,
    stores,
}: PageProps) {
    return (
        <>
            <Head title="Add product" />

            <div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4">
                <Heading
                    title="Add product"
                    description="Create a product with image, store, category, brand, and variations."
                />

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

CreateProduct.layout = {
    breadcrumbs: [
        {
            title: 'Products',
            href: '/products',
        },
        {
            title: 'Add product',
            href: '/products/create',
        },
    ],
};
