/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import React, { FunctionComponent, useState } from 'react';
import { BsThreeDotsVertical, BsX } from 'react-icons/bs';

import { Title } from '../Title';
import { IOptionsProps } from './types.d';

export const Options: FunctionComponent<IOptionsProps> = ({ title, titleSize = 16, items }) => {
  const [active, setActive] = useState(false);
  return (
    <div className={`options js-options ${active ? 'active' : ''}`}>
      <button
        type="button"
        className="options__btn js-options-btn"
        onClick={() => {
          setActive(!active);
        }}
      >
        <BsThreeDotsVertical />
      </button>
      <div className="options__dropdown js-options-dropdown">
        <div className="options__stage">
          <Title color="secondary" size={titleSize}>
            {title}
          </Title>
          <button type="button" className="options__close js-options-close" onClick={() => setActive(false)}>
            <BsX />
          </button>
        </div>
        <div className="options__group">
          {items.map((i) => (
            <a className="options__item" onClick={i.onClick}>
              <div className="options__info">{i.title}</div>
              <div className="options__text">{i.text}</div>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
};
