import { useEffect, useState } from 'react';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { AltMsgKeys, DetailArrowProps } from '../model/types';

export const DetailArrow = ({ show }: DetailArrowProps) => {
  const [altMsg, setAltMsg] = useState<AltMsgKeys>(AltMsgKeys.Fold);
  const [className, setClassName] = useState<string>('ic20 rot-180');

  useEffect(() => {
    setAltMsg((show)? AltMsgKeys.Fold: AltMsgKeys.UnFold);
    setClassName(`ic20 ${(show)? 'rot-180': ''}`);
  }, [show]);

  return (
    <>
      <img
        className={ className }
        src={ IMAGE_ROOT + '/select_arrow.svg' } 
        alt={ altMsg }
      />
    </>
  );
};