import clsx from 'clsx';
import React from 'react';
import { Option } from '../../Filters.model';
import classes from './OptionsFilter.scss';

export interface OptionFilterProps {
  value?: string;

  /** Array of Options to be displayed */
  options: Option[];

  /** Callback triggered when a new filter value is selected */
  onSelect: (text: string) => void;

  /** CSS Class name for additional styles */
  className?: string;

  /** Optional id for the label element */
  labelId?: string;
}

export const OptionsFilter: React.FC<OptionFilterProps> = ({
  value,
  options,
  onSelect,
  className = '',
  labelId,
}) => {
  return (
    <div
      role="radiogroup"
      aria-labelledby={labelId}
      className={clsx(classes.container, 'options-filter-container', className)}
    >
      {options?.map((option: Option) => (
        <div
          className={clsx(classes.option)}
          onClick={() => onSelect(option.value)}
          key={option.label}
          data-test-value={option.value as string}
          role="radio"
          aria-checked={value === option.value}
        >
          <span
            className={clsx(value === option.value && classes.selected)}
            data-test-id="label"
          >
            {option.label}
          </span>
        </div>
      ))}
    </div>
  );
};
