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

export const SupportQnaItem = ({
  sortNo,
  seq,
  statusCode,
  statusName,
  requestDate,
  requestName,
  title,
  contents,
  answer
}: QnaItemProps) => {
  const { navigate } = useNavigate();

  const onClickToDetail = () => {
    navigate(PATHS.support.qna.detail, {
      state: {
        statusCode,
        statusName,
        requestDate,
        requestName,
        title,
        contents,
        answer
      }
    });
  };

  return (
    <>
      <div 
        className="inq-item"
       onClick={ () => onClickToDetail() }
      >
        <div className="inq-line">
          <div className="inq-title-text">{ contents }</div>
          <div className="inq-meta">
            등록일<span>{ moment(requestDate).format('YYYY.MM.DD') }</span>
            <span className="sai">ㅣ</span>상태 <span>[{ statusName }]</span>
          </div>
          <span className={`dot ${(statusCode === '03')? 'blue': 'gray'}`}></span>
        </div>
      </div>
    </>
  );
};