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

export const SupportNoticeItem = ({
  id,
  title,
  category,
  regDate,
  isNew // eslint-disable-line @typescript-eslint/no-unused-vars
}: NoticeItemProps) => {
  const { navigate } = useNavigate();
  const { t } = useTranslation();

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

  return (
    <>
      <div 
        className="notice-row-114"
        onClick={ () => onClickToDetail() }
      >
        <div className="notice-txt">
          <div className="notice-title-114">{ title }</div>
          <div className="notice-meta-114">
            <span className="blue">{ t(`support.notice.categories.${category}`) }</span> ㅣ <span>{ moment(regDate).format('YYYY.MM.DD HH:mm:ss') }</span>
          </div>
        </div>
      </div>
    </>
  );
};