"use client";
import React from "react";

interface {{ view_name }}Props {
  /** Whether the view is being displayed on a mobile device */
  isMobile?: boolean;
{% for prop_name, prop_info in props.items() %}
  {{ prop_name }}{% if prop_info.required is defined and not prop_info.required %}?{% endif %}: {{ prop_info.type }};
{% endfor %}
}

/**
 * {{ description }}
 *
 * This view is mobile-responsive and will adapt its layout based on the viewport.
 * The `isMobile` prop is automatically passed by the A4E Hub when running on mobile devices.
 */
export default function {{ view_name }}View({
  isMobile = false,
  {% for prop_name in props.keys() %}{{ prop_name }}{% if not loop.last %}, {% endif %}{% endfor %}
}: {{ view_name }}Props) {
  return (
    <div
      className={`
        w-full min-h-full
        p-4 md:p-6 lg:p-8
        ${isMobile ? 'touch-pan-y touch-pan-x' : ''}
      `}
    >
      {/* Header - responsive text sizing */}
      <h2 className="text-xl md:text-2xl lg:text-3xl font-semibold text-white mb-4 md:mb-6">
        {{ description }}
      </h2>

      {/* Main content area - add your view components here */}
      <div className={`
        space-y-4 md:space-y-6
        ${isMobile ? 'pb-20' : ''}
      `}>
        {/*
          Example responsive grid - adjust columns for different screen sizes:
          - Mobile: 1 column
          - Tablet: 2 columns
          - Desktop: 3-4 columns
        */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
          {/* Add your grid items here */}
        </div>

        {/* Debug view - remove in production */}
        <details className="mt-6 p-4 bg-zinc-900/50 rounded-xl border border-white/10">
          <summary className="text-sm text-gray-400 cursor-pointer hover:text-gray-300">
            View Props (Debug)
          </summary>
          <pre className="mt-2 text-xs text-gray-500 overflow-auto max-h-48">
            {JSON.stringify({ isMobile, {% for prop_name in props.keys() %}{{ prop_name }}{% if not loop.last %}, {% endif %}{% endfor %} }, null, 2)}
          </pre>
        </details>
      </div>
    </div>
  );
}
