import { RightOutlined, LeftOutlined } from "@ant-design/icons";
import styles from "./ArrowDirections.module.scss";

export function SampleNextArrow(props: any) {
    const { className, style, onClick } = props;
    return (
      <div
        style={{
          ...style,
          display: "block",
          zIndex: "15",
          borderRadius: "50%",
          opacity: "1",
          right: 0,
          color: "#fff",
          justifyContent: "center",
        }}
        onClick={onClick}
      >
        {" "}
        <RightOutlined className={styles.iconRightDisplay} />
      </div>
    );
  }

  export function SamplePrevArrow(props: any) {
    const { className, style, onClick } = props;
    return (
      <div
        style={{
          ...style,
          display: "block",
          zIndex: "15",
          borderRadius: "50%",
          opacity: "1",
          left: 0,
          color: "#fff",
          justifyContent: "center",
        }}
        onClick={onClick}
      >
        <LeftOutlined className={styles.iconLeftDisplay} />
      </div>
    );
  }