import styles from "./styles.module.css";

interface IPredictionMoonsSliderProps {
  image: string;
  data: IPredictionMoon;
  onClick: () => void;
}

export interface IPredictionMoon {
  period: string;
}

function PredictionMoonsSlider({
  image,
  data,
  onClick,
}: IPredictionMoonsSliderProps): JSX.Element {
  return (
    <div
      className={styles.container}
      style={{ backgroundImage: `url(${image})` }}
      onClick={onClick}
    >
      <p className={styles.text}>
        <b>{data.period}</b>
      </p>
    </div>
  );
}

export default PredictionMoonsSlider;
