/**
 * Create page for {{ model_name }}.
 *
 * ✅ YOUR CODE - Safe to modify, will not be overwritten.
 * This file was generated once by Prism and is yours to customize.
 */

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { use{{ model_name }}Mutations } from '../../hooks/use{{ model_name }}';
import { {{ model_name }}Form } from '../../components/{{ kebab_name }}/{{ model_name }}Form';
import type { {{ model_name }}Create } from '../../types/generated';

export default function {{ model_name }}CreatePage(): JSX.Element {
  const navigate = useNavigate();
  const { create, loading, error } = use{{ model_name }}Mutations();

  const handleSubmit = async (data: {{ model_name }}Create) => {
    const result = await create(data);
    if (result) {
      navigate(`/{{ plural_kebab }}/${result.id}`);
    }
  };

  const handleCancel = () => {
    navigate('/{{ plural_kebab }}');
  };

  return (
    <div className="page-container max-w-2xl">
      <header className="page-header">
        <h1 className="page-title">Create {{ model_name }}</h1>
        <p className="page-subtitle">Add a new {{ model_name_lower }} to your collection</p>
      </header>

      {error && (
        <div className="card p-4 mb-6 border-red-200 bg-red-50">
          <p className="text-red-700 text-sm">Error: {error.message}</p>
        </div>
      )}

      <div className="card p-6">
        <{{ model_name }}Form
          onSubmit={handleSubmit}
          loading={loading}
          submitLabel="Create"
          onCancel={handleCancel}
        />
      </div>
    </div>
  );
}
