import { ArrowLeft, ArrowRight } from "@ledgerhq/icons-ui/react";
import React from "react";
import styled from "styled-components";
import Pagination from "./Pagination";
const FooterContainer = styled.div `
  height: 32px;
  border-top: 1px solid ${p => p.theme.colors.opacityDefault.c10};
  display: flex;
  justify-content: space-between;
  padding: 6px 16px 6px 16px;
`;
const FooterArrowsContainer = styled.div `
  display: flex;
  gap: 8px;
  align-items: center;
`;
const FooterArrowContainer = styled.div `
  display: flex;
  align-items: center;
  cursor: pointer;
`;
const FooterContentCard = ({ children, emblaApi, currentIndex, variant }) => {
    return (React.createElement(FooterContainer, null,
        React.createElement(Pagination, { variant: variant, children: children, emblaApi: emblaApi, currentIndex: currentIndex }),
        React.createElement(FooterArrowsContainer, null,
            React.createElement(FooterArrowContainer, { onClick: () => emblaApi?.scrollPrev() },
                React.createElement(ArrowLeft, { size: "S" })),
            React.createElement(FooterArrowContainer, { onClick: () => emblaApi?.scrollNext() },
                React.createElement(ArrowRight, { size: "S" })))));
};
export default FooterContentCard;
//# sourceMappingURL=variantContentCard.js.map