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

export const HomeNoticeItem = ({
  seq,
  title,
  informCl,
  regDt,
}: NoticeItemProps) => {
  const { navigate } = useNavigate();
  const { t } = useTranslation();

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

  return (
    <>
      <div 
        className="notice-item"
        onClick={ () => onClickToDetail() }
      >
        <div className="notice-content">
          <div className="notice-title">{ title }</div>
          <div className="notice-meta">{ t(`support.notice.categories.${informCl}`) }<span>{ moment(regDt).format('YY년 MM월 DD일') }</span></div>
        </div>
        <div className="notice-arrow">
          <img
            src={ IMAGE_ROOT + '/Forward.svg' }
            alt={t('home.notice.goTo')}
          />
        </div>
      </div>
    </>
  );
};