import { IntroListItemProps } from '../model/types';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';

export const IntroListItem = ({
  className,
  serviceName,
  serviceDesc,
  icon,
  path
}: IntroListItemProps) => {
  const { navigate } = useNavigate();
  
  const onClickToNavigate = () => {
    if(!!path){
      navigate(path);
    }
  };
  return (
    <>
      <div 
        className={ className }
        onClick={ () => onClickToNavigate() }
      >
        <div>
          <div className="service-name">{ serviceName }</div>
          <p className="service-desc">{ serviceDesc }</p>
        </div>
        <img 
          src={ icon } 
          alt={ serviceName }
        />
      </div>
    </>
  )
};