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

export const InfoArrow = ({ show }: InfoArrowProps) => {
  const [altMsg, setAltMsg] = useState<'접기' | '펼치기'>('접기');
  const [className, setClassName] = useState<string>('ic20 rot-180');

  useEffect(() => {
    setAltMsg((show)? '접기': '펼치기');
    setClassName(`ic20 ${(show)? 'rot-180': ''}`);
  }, [show]);

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