import { PATHS } from '@/shared/constants/paths';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { AlarmItemProps } from '../model/types';

export const AlarmItem = ({
  title,
  category,
  date
}: AlarmItemProps) => {
  const { navigate } = useNavigate();
  const onClickToNavigate = (alarmId: number) => {
    let path = PATHS.support.notice.detail + alarmId;
    navigate(path);
  };

  return (
    <div className="notice-item">
      <div className="notice-content">
        <div className="notice-title">{ title }</div>
        <div className="notice-meta">
          <strong>{ category }</strong>
          <span>{ date }</span>
        </div>
      </div>
      <div 
        className="notice-arrow"
        onClick={ () => onClickToNavigate(4) }
      >
        <img 
          src={ IMAGE_ROOT + '/Forward.svg' }
          alt={ category + '바로가기' }
        />
      </div>
    </div>
  );
};