import moment from 'moment';
import { QnaItemProps } from '../model/types';
import { useTranslation } from 'react-i18next';

export const SupportQnaItem = ({
  qnaItem,
  setDetailData
}: QnaItemProps) => {
  const { t } = useTranslation();
  const onClickToDetail = () => {
    if(setDetailData){
      setDetailData({
        qnaItem: qnaItem,
        detailOn: true
      });
    }
  };

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