'use client';
import { PageLayout } from './PageLayout';
import { Input } from '@/components/ui/input';
import { FaSearch } from 'react-icons/fa';
import { TableLayoutProps } from '@/types/common';
import { TableSkeleton } from '@/components/skeletons/TableSkeleton';

export function TableLayout({
  title,
  buttonText,
  onButtonClick,
  searchQuery,
  onSearchChange,
  isLoading,
  isEmpty,
  emptyMessage = 'No items found',
  children,
}: TableLayoutProps) {
  return (
    <PageLayout title={title} addButtonText={buttonText} onAddClick={onButtonClick} backButton={false}>
      <div>
        <Input
          type='text'
          placeholder={`Search ${title.toLowerCase()}...`}
          value={searchQuery}
          Icon={FaSearch}
          onChange={(e) => onSearchChange(e.target.value)}
          className='bg-neutral-200 text-neutral-800 placeholder:text-neutral-800 border-neutral-800 rounded-md'
        />
      </div>

      {(() => {
        if (isLoading) {
          return <TableSkeleton />;
        }

        if (isEmpty) {
          return (
            <div className='text-center py-8 bg-neutral-200 rounded-lg border border-neutral-700'>
              <p className='text-neutral-800'>{emptyMessage}</p>
            </div>
          );
        }

        return children;
      })()}
    </PageLayout>
  );
}
