import React from 'react';
import classNames from 'classnames/bind';
import styles from './CategoryLayerFilter.scss';
import { ECategory } from '@src/constants/Enums';

const cx = classNames.bind(styles);

interface IOwnProps {
  selected: ECategory;
  setSelected: (type: ECategory) => void;
  hide: () => void;
};

const CategoryLayerFilter: React.FC<IOwnProps> = ({
  selected,
  setSelected,
  hide
}) => {
  const handleClick = (type: ECategory) => {
    setSelected(type);
    hide();
  };

  return (
    <div className={cx('ly_filter')}>
      <ul className={cx('detail_list')}>
        <li>
          <button
            type="button"
            className={cx('btn_detail')}
            aria-pressed={selected === ECategory.ALL}
            onClick={() => handleClick(ECategory.ALL)}
          >
            전체
          </button>
        </li>
        <li>
          <button
            type="button"
            className={cx('btn_detail')}
            aria-pressed={selected === ECategory.ART}
            onClick={() => handleClick(ECategory.ART)}
          >
            아트/미술작품
          </button>
        </li>
        <li>
          <button
            type="button"
            className={cx('btn_detail')}
            aria-pressed={selected === ECategory.GAME}
            onClick={() => handleClick(ECategory.GAME)}
          >
            게임/캐릭터
          </button>
        </li>
      </ul>
    </div>
  );
};

export default CategoryLayerFilter;
