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

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

  const onClickToDetail = () => {
    navigate(PATHS.support.notice.detail, {
      state: {
        seq: seq,
        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.${informCl}`) }</span> ㅣ <span>{ moment(regDt).format('YYYY.MM.DD HH:mm:ss') }</span>
          </div>
        </div>
      </div>
    </>
  );
};