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

export const SupportFaqItem = ({
  cursorId,
  seq,
  category,
  title,
  contents,
}: FaqItemProps) => {
  const { navigate } = useNavigate();
  const { t } = useTranslation();

  const onClickToDetail = () => {
    navigate(PATHS.support.faq.detail, {
      state: {
        cursorId,
        seq,
        category,
        title,
        contents
      }
    });
  };

  return (
    <>
      <div 
        className="faq-row"
        onClick={ () => onClickToDetail() }
      >
        <div className="faq-txt">
          <div className="faq-title">{ title }</div>
          <div className="faq-tag">{ t('support.faq.categories.' + category) }</div>
        </div>
      </div>
    </>
  );
}