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

export const SupportFaqItem = ({
  sortNo,
  seq,
  category,
  categoryName,
  title,
  contents,
}: FaqItemProps) => {
  const { navigate } = useNavigate();

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

  return (
    <>
      <div 
        className="faq-row"
        onClick={ () => onClickToDetail() }
      >
        <div className="faq-txt">
          <div className="faq-title">{ title }</div>
          <div className="faq-tag">{ categoryName }</div>
        </div>
      </div>
    </>
  );
}