/**
 * Base detail view component for {{ model_name }}.
 *
 * ⚠️ AUTO-GENERATED BY PRISM - DO NOT EDIT
 */

import { type ReactElement } from 'react';
import type { {{ model_name }} } from '../../types/generated';

export interface {{ model_name }}DetailBaseProps {
  /** The {{ model_name }} to display */
  data: {{ model_name }};
  /** Loading state */
  loading?: boolean;
  /** Edit action handler */
  onEdit?: () => void;
  /** Delete action handler */
  onDelete?: () => void;
  /** Back navigation handler */
  onBack?: () => void;
}

/**
 * Base detail view component for {{ model_name }}.
 * Extend this in components/{{ kebab_name }}/{{ model_name }}Detail.tsx
 */
export function {{ model_name }}DetailBase({
  data,
  loading = false,
  onEdit,
  onDelete,
  onBack,
}: {{ model_name }}DetailBaseProps): ReactElement {
  if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="animate-pulse flex items-center gap-3">
          <div className="w-2 h-2 bg-nordic-400 rounded-full animate-bounce" />
          <div className="w-2 h-2 bg-nordic-400 rounded-full animate-bounce [animation-delay:0.1s]" />
          <div className="w-2 h-2 bg-nordic-400 rounded-full animate-bounce [animation-delay:0.2s]" />
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <header className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          {onBack && (
            <button onClick={onBack} className="btn-ghost p-2 -ml-2" aria-label="Back">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
              </svg>
            </button>
          )}
          <div>
            <h1 className="page-title">{{ model_name }} #{data.id}</h1>
          </div>
        </div>
        <div className="flex items-center gap-2">
          {onEdit && (
            <button onClick={onEdit} className="btn-secondary">
              <svg className="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
              </svg>
              Edit
            </button>
          )}
          {onDelete && (
            <button onClick={onDelete} className="btn-danger">
              <svg className="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
              </svg>
              Delete
            </button>
          )}
        </div>
      </header>

      <div className="card p-6">
        <dl className="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <dt className="text-sm font-medium text-nordic-500 mb-1">ID</dt>
            <dd className="text-nordic-900">{data.id}</dd>
          </div>
{{ detail_fields }}
        </dl>
      </div>
    </div>
  );
}
