import React from 'react';
{{if .Component.Entity}}import { {{.Component.Entity}} } from '../types/{{.Component.Entity}}';
{{end}}

interface {{.Component.Type | title}}ComponentProps {
  className?: string;
  {{if .Component.Entity}}data?: {{.Component.Entity}}[];
  {{end}}
}

export default function {{.Component.Type | title}}Component({
  className = '',
  {{if .Component.Entity}}data{{end}}
}: {{.Component.Type | title}}ComponentProps) {
  {{if eq .Component.Type "form"}}
  const [formData, setFormData] = React.useState({});

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Form submitted:', formData);
    // TODO: Implement form submission
  };

  return (
    <div className={`bg-white p-6 rounded-lg shadow ${className}`}>
      <form onSubmit={handleSubmit} className="space-y-4">
        {{range .Component.Elements}}{{if .Field}}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            {{.Field.Name | title}}
          </label>
          <input
            type="{{if eq .Field.Type "text"}}text{{else if eq .Field.Type "email"}}email{{else}}text{{end}}"
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            onChange={(e) => setFormData({...formData, {{.Field.Name}}: e.target.value})}
          />
        </div>
        {{end}}{{end}}
        <button
          type="submit"
          className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
          Submit
        </button>
      </form>
    </div>
  );
  {{else if eq .Component.Type "table"}}
  return (
    <div className={`bg-white rounded-lg shadow overflow-hidden ${className}`}>
      <table className="min-w-full divide-y divide-gray-200">
        <thead className="bg-gray-50">
          <tr>
            {{range .Component.Elements}}{{if .Field}}
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              {{.Field.Name | title}}
            </th>
            {{end}}{{end}}
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Actions
            </th>
          </tr>
        </thead>
        <tbody className="bg-white divide-y divide-gray-200">
          {data?.map((item, index) => (
            <tr key={index}>
              {{range .Component.Elements}}{{if .Field}}
              <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                {item.{{.Field.Name}}}
              </td>
              {{end}}{{end}}
              <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <button className="text-blue-600 hover:text-blue-900 mr-2">
                  Edit
                </button>
                <button className="text-red-600 hover:text-red-900">
                  Delete
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
  {{else if eq .Component.Type "list"}}
  return (
    <div className={`space-y-4 ${className}`}>
      {data?.map((item, index) => (
        <div key={index} className="bg-white p-6 rounded-lg shadow">
          {{range .Component.Elements}}{{if .Field}}
          <div className="mb-2">
            <span className="font-semibold text-gray-700">{{.Field.Name | title}}:</span>
            <span className="ml-2 text-gray-900">{item.{{.Field.Name}}}</span>
          </div>
          {{end}}{{end}}
        </div>
      ))}
    </div>
  );
  {{else}}
  return (
    <div className={`bg-white p-6 rounded-lg shadow ${className}`}>
      <h3 className="text-lg font-semibold text-gray-900 mb-4">
        {{.Component.Type | title}} Component
      </h3>
      <p className="text-gray-600">
        This is a {{.Component.Type}} component. Add your custom implementation here.
      </p>
    </div>
  );
  {{end}}
}