import { useTheme } from '@emotion/react';
import React from 'react';
import { PickerItemComp } from './style';

export interface IProps {
  label: string;
  value: string | number;
  isActive: boolean;
  tabIndex: number;
  handleSelect: (val: string | number) => void;
}
export const PickerItem = ({
  label,
  value,
  isActive,
  handleSelect,
  tabIndex,
}: IProps) => {
  const colors = useTheme();

  return (
    <PickerItemComp
      onClick={() => handleSelect(value)}
      className={isActive ? 'active' : ''}
      theme={{ ...colors }}
      tabIndex={0}
      onKeyDown={(e) => {
        if (e.key === ' ') {
          e.preventDefault();
          handleSelect(value);
        }
      }}
    >
      {label}
    </PickerItemComp>
  );
};