import { useMediaQuery } from "usehooks-ts"

import Desktop from "./Desktop"
import Mobile from "./Mobile"

import type { StepsProps } from "@/types/components/myPages/myStay/ancillaries"

export default function Steps(props: StepsProps) {
  const isMobile = useMediaQuery("(max-width: 767px)")

  return isMobile ? <Mobile {...props} /> : <Desktop {...props} />
}