import AdminLayout from '@admin/layouts/admin/admin-layout';
import { Head } from '@inertiajs/react';
import { ReactNode } from 'react';
import TenantForm, { Package } from './TenantForm';

interface Props {
    readonly packages?: Package[];
    readonly error?: string;
    readonly errors?: Record<string, string>;
}

export default function Create({ packages, error, errors }: Props) {
    return (
        <>
            <Head title="Create Tenant - Admin Panel" />

            <div className="no-scrollbar rounded-xl p-4">
                <div className="mb-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
                    <div className="grid grid-cols-1 gap-1">
                        <h2 className="text-xl font-bold sm:text-2xl">Create Tenant</h2>
                        <div className="flex items-center text-sm text-gray-600">
                            <span>Administration</span>
                            <span className="mx-2">›</span>
                            <span>Tenants</span>
                            <span className="mx-2">›</span>
                            <span>Create</span>
                        </div>
                    </div>
                </div>

                <div className="space-y-6">
                    <TenantForm packages={packages} error={error} errors={errors} isEdit={false} />
                </div>
            </div>
        </>
    );
}

Create.layout = (page: ReactNode) => (
    <AdminLayout
        breadcrumbs={[
            { title: 'Home', href: '/' },
            { title: 'Tenants', href: route('admin.tenants.index') },
            { title: 'Create', href: '#' },
        ]}
    >
        {page}
    </AdminLayout>
);
