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

export const SupportQnaItem = ({
  answer,
  answerDate,
  contents,
  corpName,
  cursorId,
  requestDate,
  requestName,
  requestType,
  sendEmail,
  seq,
  statusCode,
  title
}: QnaItemProps) => {
  const { navigate } = useNavigate();
  const { t } = useTranslation();
  const onClickToDetail = () => {
    navigate(PATHS.support.qna.detail, {
      state: {
        answer: answer,
        answerDate: answerDate,
        contents: contents,
        corpName: corpName,
        cursorId: cursorId,
        requestDate: requestDate,
        requestName: requestName,
        requestType: requestType,
        sendEmail: sendEmail,
        seq: seq,
        statusCode: statusCode,
        title: title
      }
    });
  };

  return (
    <>
      <div 
        className="inq-item"
        onClick={ () => onClickToDetail() }
      >
        <div className="inq-line">
          <div className="inq-title-text">{ title }</div>
          <div className="inq-meta">
            {t('support.qna.registrationDate')}<span>{ moment(requestDate).format('YYYY.MM.DD') }</span>
            <span className="sai">ㅣ</span>{t('support.qna.status')} <span>[{t(`support.qna.statusCode.${statusCode}`)}]</span>
          </div>
          <span className={`dot ${(statusCode === '03')? 'blue': 'gray'}`}></span>
        </div>
      </div>
    </>
  );
};