import React, { HTMLAttributes, ReactNode, ForwardedRef } from 'react';
import clsx from 'clsx';

interface CustomListItemProps extends HTMLAttributes<HTMLDivElement> {
  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
  className?: string;
  children?: ReactNode;
}

export const CustomListItem = React.forwardRef<HTMLDivElement, CustomListItemProps>(
  ({ onClick, className, children, ...props }, ref: ForwardedRef<HTMLDivElement>) => (
    <div
      ref={ref}
      className={clsx('gtc-rc-list-item', className)}
      tabIndex={0}
      role="button"
      onClick={onClick}
      onKeyPress={e => {
        if (e.key === 'Enter' || e.key === ' ') onClick?.(e as any);
      }}
      {...props}
      style={{
        cursor: 'pointer',
        outline: 'none',
        ...(props.style || {}),
      }}
    >
      {children}
    </div>
  )
); 