const ServicioContainer = ({
  children,
  className,
  id,
}: {
  children: React.ReactNode;
  className?: string;
  id: ServicioId;
}) => {

  const { servicioActive, setServicioActive } = useServiciosStore();
  const ref = useRef(null)
  const isInView = useInView(ref, {
    margin: '-50%'
  })

  useEffect(() => {
    if (isInView) {
      setServicioActive(id)
    }
  }
  , [isInView])


  return (
    <div ref={ref} id={id} className={className}>
      <div className="flex max-w-lg flex-col justify-between gap-6 sm:mx-auto sm:gap-8 lg:m-0 lg:max-w-none lg:flex-row xl:gap-24">
        {children}
      </div>
    </div>
  );
};

const ServicioContainer = ({
  children,
  className,
  id,
}: {
  children: React.ReactNode;
  className?: string;
  id: ServicioId;
}) => {

  const { servicioActive, setServicioActive } = useServiciosStore();
  const ref = useRef(null)
  const isInView = useInView(ref, {
    margin: '-50%'
  })

  useEffect(() => {
    if (isInView) {
      setServicioActive(id)
    }
  }
  , [isInView])


  return (
    <div ref={ref} id={id} className={className}>
      <div className="flex max-w-lg flex-col justify-between gap-6 sm:mx-auto sm:gap-8 lg:m-0 lg:max-w-none lg:flex-row xl:gap-24">
        {children}
      </div>
    </div>
  );
};