import { NoticeItemProps } from '@/entities/support/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import moment from 'moment';

export const HomeNoticeItem = ({
  id,
  title,
  category,
  regDate,
  isNew
}: NoticeItemProps) => {
  const { navigate } = useNavigate();

  const onClickToDetail = () => {
    navigate(PATHS.support.notice.detail, {
      state: {
        id: id
      }
    })
  };

  return (
    <>
      <div 
        className="notice-item"
        onClick={ () => onClickToDetail() }
      >
        <div className="notice-content">
          <div className="notice-title">{ title }</div>
          <div className="notice-meta">{ category}<span>{ moment(regDate).format('YY년 MM월 DD일') }</span></div>
        </div>
        <div className="notice-arrow">
          <img 
            src={ IMAGE_ROOT + '/Forward.svg' } 
            alt="공지사항 바로가기" 
          />
        </div>
      </div>
    </>
  );
};