// Method 1: Import styles
import '@shakibdshy/react-tablegrid/styles';

// OR Method 2: Import CSS file directly
import '@shakibdshy/react-tablegrid/dist/table-grid.css';

 
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ... your content configuration
    "node_modules/@shakibdshy/react-tablegrid/dist/**/*.{js,ts,jsx,tsx}",
  ],
};

type DataItem = {
  id: number;
  name: string;
  age: number;
  email: string;
};

const columnHelper = createColumnHelper<DataItem>();

const columns: Column<DataItem>[] = [
  columnHelper.accessor("name", {
    header: "Name",
    sortable: false,
  }),
  columnHelper.accessor("age", {
    header: "Age",
    sortable: false,
  }),
  columnHelper.accessor("email", {
    header: "Email",
    sortable: false,
  }),
];

const BasicTable = () => {
  return (
    <div className="p-4">      
      <TableContainer
        columns={columns}
        data={dummyData}
        maxHeight="400px"
        variant="modern"
        onStateChange={(state) => {
          console.log("Table state changed:", state);
        }}
      />
    </div>
  );
};

export default BasicTable;

interface Column<T> {
  id: keyof T;
  header: ReactNode | (() => ReactNode);
  accessorKey: keyof T;
  sortable?: boolean;
  className?: string;
  width?: string;
  group?: string;
  pinned?: 'left' | 'right' | false;
  groupable?: boolean;
  nestedHeaders?: Column<T>[];
  cell?: (props: {
    value: T[keyof T];
    row: T;
    onChange?: (value: T[keyof T]) => void;
    onDelete?: () => void;
  }) => ReactNode;
}

interface ServerSideConfig {
  enabled: boolean;
  totalRows: number;
  pageSize: number;
  onFetch: (params: {
    page: number;
    sortBy?: string;
    sortDirection?: 'asc' | 'desc';
    filters?: Record<string, any>;
  }) => Promise<T[]>;
}

interface VirtualizationConfig {
  enabled: boolean;
  rowHeight: number;
  overscan?: number;
  scrollThreshold?: number;
}

interface TouchConfig {
  enabled: boolean;
  swipeThreshold?: number;
  longPressDelay?: number;
  dragEnabled?: boolean;
}

interface TableStyleConfig {
  container?: {
    className?: string;
    style?: React.CSSProperties;
    wrapperClassName?: string;
    scrollContainerClassName?: string;
    tableClassName?: string;
  };
  header?: {
    className?: string;
    style?: React.CSSProperties;
    headerRowClassName?: string;
    headerCellClassName?: string;
    headerGroupClassName?: string;
  };

  body?: {
    style?: React.CSSProperties;
    className?: string;
    rowClassName?: string;
    cellClassName?: string;
  };

  resizer?: {
    className?: string;
    style?: React.CSSProperties;
  };

  resizerIndicator?: {
    className?: string;
    style?: React.CSSProperties;
  };

  sortButton?: {
    className?: string;
    style?: React.CSSProperties;
  };

  utilityStyles?: {
    emptyClassName?: string;
    searchContainerClassName?: string;
    searchInputClassName?: string;
    loadingClassName?: string;
    style?: React.CSSProperties;
  };
}