import type { {{ENTITY}} } from '@/types';
import { use{{ENTITY}} } from '@/hooks/use{{ENTITY}}';
import { Spinner } from '@/components/ui/Spinner';
import { ErrorMessage } from '@/components/ui/ErrorMessage';
import { cn } from '@/lib/utils';

interface {{COMPONENT_NAME}}Props {
  {{ENTITY_LOWER}}Id: string;
  className?: string;
}

/**
 * {{COMPONENT_NAME}} component
 * 
 * @description Displays {{ENTITY_LOWER}} information
 * @example
 * ```tsx
 * <{{COMPONENT_NAME}} {{ENTITY_LOWER}}Id="123" />
 * ```
 */
export const {{COMPONENT_NAME}}: React.FC<{{COMPONENT_NAME}}Props> = ({
  {{ENTITY_LOWER}}Id,
  className,
}) => {
  // Custom hook handles business logic
  const { data: {{ENTITY_LOWER}}, isLoading, error } = use{{ENTITY}}({{ENTITY_LOWER}}Id);

  // Loading state
  if (isLoading) {
    return (
      <div className={cn('flex items-center justify-center p-4', className)}>
        <Spinner />
      </div>
    );
  }

  // Error state
  if (error) {
    return (
      <div className={cn('p-4', className)}>
        <ErrorMessage error={error} />
      </div>
    );
  }

  // Not found state
  if (!{{ENTITY_LOWER}}) {
    return (
      <div className={cn('p-4', className)}>
        <p>{{ENTITY}} not found</p>
      </div>
    );
  }

  // Success state - render component
  return (
    <div className={cn('p-4', className)}>
      {/* TODO: Add component content */}
      <h2>{/* {{ENTITY_LOWER}}.field */}</h2>
    </div>
  );
};