import { LeftArrow, RightArrow } from "../pages/home/styled"
import ArrowLeft from "../resources/arrow-left.svg"
import ArrowRight from "../resources/arrow-right.svg"

export const NextArrow = (props: any) => {
  const { className, style, onClick } = props
  const isHide = props.onClick === null

  return (
    <RightArrow
      className={className}
      style={{ ...style, opacity: isHide ? 0.2 : 1 }}
      src={ArrowRight}
      onClick={onClick}
    />
  )
}

export const PrevArrow = (props: any) => {
  const { className, style, onClick } = props
  const isHide = props.onClick === null

  return (
    <LeftArrow
      className={className}
      style={{ ...style, opacity: isHide ? 0.2 : 1 }}
      src={ArrowLeft}
      onClick={onClick}
    />
  )
}