import { useState } from "react";
import GenericBox from "../../ui/GenericBox";
import { URL_RADIO_DATA } from "./../../constants/photo";
import { useSharedState } from "../../store/useSharedState";
import GenericRadioGroup from "./../../ui/GenericRadioGroup";
import { Divider } from "@mui/material";

function PhotoGenericOptions() {
  const [urlPoint, setUrlPoint] = useState("single");
  const setPreviewMode = useSharedState((state) => state.setPreviewMode);

  const handleUrlRadioChange = (event) => {
    setUrlPoint(event.target.value);
    setPreviewMode(event.target.value === "rwd" ? "desktop" : "single");
  };

  return (
    <GenericBox variant="inner" title="Opcje">
      <GenericRadioGroup
        radioData={URL_RADIO_DATA}
        value={urlPoint}
        onChange={handleUrlRadioChange}
        direction="row"
      />
      <Divider />
      Labelki
      <Divider />
      Opinie
      <Divider />
      Dodaj do koszyka
      <Divider />
    </GenericBox>
  );
}

export default PhotoGenericOptions;