import React, { useEffect, useState } from 'react';
import { GenericMaintenanceTab } from '../../components/generic/GenericMaintenanceTab';
import { InstitutionCategory } from '../../types/doctor/generic';
import { InstitutionCategoryAPI } from '../../services/generic/institutionCategoryApi';
import { useInstitutionCategoryApi } from '../../hooks/generic/useInstitutionCategory';

export const InstitutionCategoryTab: React.FC = () => {
    const {  fetchInstitutionCategory } = useInstitutionCategoryApi(); 
    const [loading, setLoading] = useState(true);
    
         useEffect(() => {
            const loadData = async () => {
              setLoading(true);
              await Promise.all([
                fetchInstitutionCategory()
              ]);
              setLoading(false);
            };
            loadData();
          }, []);

     if (loading) {
    return <div className="flex justify-center py-4">Loading options...</div>;
  }


  return (
    <GenericMaintenanceTab<InstitutionCategory,number>
      title="Categories"
      idField="institutionCategoryId"
       showActions={true}
        showEditButton={true}
        showDeleteButton={false}  
      columns={[
        { key: 'institutionCategoryId', label: 'ID' ,searchable: false},
         { key: 'institutionCategoryCode', label: 'Category Code' },
        { key: 'institutionCategoryName', label: 'Category Name' },
        { 
          key: 'isActive', 
          label: 'Status',
          render: (value) => (
            <span className={value ? 'text-green-600' : 'text-gray-400'}>
              {value ? '● Active' : '○ Inactive'}
            </span>
          )
        },
      ]}
      formFields={[
        {
          key: 'institutionCategoryCode',
          label: 'Category Code',
          type: 'text',
          required: true,
          placeholder: 'Enter category code',
        },
        {
          key: 'institutionCategoryName',
          label: 'Category Name',
          type: 'text',
          required: true,
          placeholder: 'Enter category name',
        },
          {
          key: 'isActive',
          label: 'Status',
          type: 'select',
          required: false,
          options: [
            { value: true, label: 'Active' },
            { value: false, label: 'Inactive' },
          ],
        },
      ]}
      api={InstitutionCategoryAPI}
    />
  );
};