/* CarouselSlide.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./CarouselSlide.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import { useIntl } from 'react-intl';
import Button from '@atlaskit/button/new';
import { cx } from '@atlaskit/css';
import Heading from '@atlaskit/heading';
import Image from '@atlaskit/image';
import { Box, Pressable, Text } from '@atlaskit/primitives/compiled';
import { messages } from '../../../../messages';
var styles = {
  columnImage: "_16jlkb7n _1o9zkb7n _i0dlghg7 _1e0c1txw _4cvr1h6o _1bah1h6o _ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi _bfhk1dy8",
  columnContent: "_zulp1ejb _16jlkb7n _1o9zkb7n _i0dluuw1 _1e0c1txw _2lx21bp4 _ca0q1jfw _u5f31jfw _n3td1jfw _19bv1jfw _4cvr1y6m _1bah1h6o",
  columnContentCompact: "_ca0qpxbi _u5f3pxbi _n3tdpxbi _19bvpxbi",
  dot: "_2rko1rr0 _1bsbi2wt _4t3ii2wt _bfhki8nm _1oecfnf5 _k8m01k61 _6fl45ucs _lcxvglyw",
  dotActive: "_bfhkjmqp",
  dotPassable: "_2rko1rr0 _1e0c1txw _4cvr1h6o _1bah1h6o _1bsb7vkz _4t3i7vkz _bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t",
  icon: "_1o9zidpf _1bsb1tcg _4t3i1tcg _1e0c1txw _4cvr1h6o _1bah1h6o",
  iconImage: "_1bsb1osq _4t3i1osq _5ral1f51",
  image: "_1bsb1osq _c71l1wdt _5ral1f51 _rsufaqso _1e0c1ule",
  rowButton: "_zulpu2gc _1e0c1txw _2lx2vrvc _1n261g80 _4cvr1h6o",
  rowButtonCompact: "_1bsb1osq",
  rowDot: "_zulpze3t _1e0c1txw _2lx2vrvc _4cvr1h6o",
  rowIcon: "_zulpu2gc _1e0c1txw _4cvr1h6o",
  slide: "_1reo1wug _18m91wug _1e0c1txw _1n261g80 _1bsb1osq _4t3i1osq _4cvr1fhb _vchhusvi"
};
var CarouselSlide = function CarouselSlide(_ref) {
  var icon = _ref.icon,
    iconLabel = _ref.iconLabel,
    title = _ref.title,
    description = _ref.description,
    image = _ref.image,
    primaryButtonLabel = _ref.primaryButtonLabel,
    onPrimaryButtonClick = _ref.onPrimaryButtonClick,
    onDotClick = _ref.onDotClick,
    onNextClick = _ref.onNextClick,
    slideIndex = _ref.slideIndex,
    totalSlides = _ref.totalSlides,
    size = _ref.size,
    _ref$testId = _ref.testId,
    testId = _ref$testId === void 0 ? 'embed-card-teaser-slide' : _ref$testId;
  var _useIntl = useIntl(),
    formatMessage = _useIntl.formatMessage;
  var isCompact = size !== 'full';
  var showNavigation = totalSlides > 1;
  var renderedIcon = icon == null ? null : typeof icon === 'string' ? /*#__PURE__*/React.createElement(Box, {
    xcss: styles.icon
  }, /*#__PURE__*/React.createElement(Image, {
    src: icon,
    alt: iconLabel,
    className: ax([styles.iconImage])
  })) : /*#__PURE__*/React.createElement(Box, {
    xcss: styles.icon
  }, icon);
  var renderedImage = image == null ? null : typeof image === 'string' ? /*#__PURE__*/React.createElement(Image, {
    src: image,
    alt: title,
    className: ax([styles.image])
  }) : image;
  return /*#__PURE__*/React.createElement(Box, {
    xcss: styles.slide,
    testId: testId
  }, /*#__PURE__*/React.createElement(Box, {
    xcss: cx(styles.columnContent, isCompact && styles.columnContentCompact)
  }, isCompact && /*#__PURE__*/React.createElement(Box, {
    xcss: cx(styles.rowButton, styles.rowButtonCompact)
  }, /*#__PURE__*/React.createElement(Button, {
    appearance: "primary",
    onClick: onPrimaryButtonClick,
    shouldFitContainer: true,
    testId: "".concat(testId, "-connect-compact")
  }, primaryButtonLabel)), renderedIcon && /*#__PURE__*/React.createElement(Box, {
    xcss: styles.rowIcon
  }, renderedIcon), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Heading, {
    size: "medium",
    testId: "".concat(testId, "-title")
  }, title)), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Text, {
    testId: "".concat(testId, "-description")
  }, description)), /*#__PURE__*/React.createElement(Box, {
    xcss: styles.rowButton
  }, !isCompact && /*#__PURE__*/React.createElement(Button, {
    appearance: "primary",
    onClick: onPrimaryButtonClick,
    testId: "".concat(testId, "-connect")
  }, primaryButtonLabel), showNavigation && onNextClick && /*#__PURE__*/React.createElement(Button, {
    appearance: "subtle",
    onClick: onNextClick,
    testId: "".concat(testId, "-next")
  }, formatMessage(messages.connect_link_account_embed_teaser_button_next)), showNavigation && /*#__PURE__*/React.createElement(Box, {
    xcss: styles.rowDot,
    role: "group",
    "aria-label": formatMessage(messages.connect_link_account_embed_teaser_dot_row_label)
  }, Array.from({
    length: totalSlides
  }, function (_, i) {
    return /*#__PURE__*/React.createElement(Pressable, {
      key: i,
      xcss: styles.dotPassable,
      onClick: function onClick() {
        return onDotClick === null || onDotClick === void 0 ? void 0 : onDotClick(i);
      },
      "aria-label": formatMessage(messages.connect_link_account_embed_teaser_dot_label, {
        index: i + 1,
        total: totalSlides
      }),
      "aria-current": i === slideIndex ? 'true' : undefined,
      testId: "".concat(testId, "-dot-").concat(i)
    }, /*#__PURE__*/React.createElement(Box, {
      xcss: cx(styles.dot, i === slideIndex && styles.dotActive)
    }));
  })))), !isCompact && /*#__PURE__*/React.createElement(Box, {
    xcss: styles.columnImage,
    testId: "".concat(testId, "-image-panel")
  }, renderedImage));
};
export default CarouselSlide;