import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useEffect, useState } from "react";
import CssFlex from "../../ui/CssFlex";
import Typography from "../../ui/Typography";
import VisualSection from "./VisualSection";

var VisualsTab = function VisualsTab(props) {
  var translations = props.translations,
      images = props.images,
      suggestedImages = props.suggestedImages,
      generatingFromAI = props.generatingFromAI,
      onRemoveAsset = props.onRemoveAsset;

  var _useState = useState(images),
      _useState2 = _slicedToArray(_useState, 2),
      assets = _useState2[0],
      setAssets = _useState2[1];

  var _useState3 = useState(suggestedImages),
      _useState4 = _slicedToArray(_useState3, 2),
      suggestedAssets = _useState4[0],
      setSuggestedAssets = _useState4[1];

  var _useState5 = useState(false),
      _useState6 = _slicedToArray(_useState5, 2),
      isLoadingAssets = _useState6[0],
      setIsLoadingAssets = _useState6[1];

  useEffect(function () {
    setAssets(images);
    setSuggestedAssets(suggestedImages);
  }, [images]);
  return /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "lg"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "title2",
    shade: 800,
    weight: "semibold",
    sx: {
      ml: "lg"
    }
  }, translations.visualSection.images), /*#__PURE__*/React.createElement(VisualSection, {
    assets: assets,
    suggestedAssets: suggestedAssets,
    onRemoveAsset: onRemoveAsset,
    translations: translations,
    isLoadingAssets: isLoadingAssets,
    setIsLoadingAssets: setIsLoadingAssets,
    generatingFromAI: generatingFromAI
  }));
};

export default VisualsTab;