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

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

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

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