import { __, sprintf } from "@wordpress/i18n";
import { getRtlStyle } from "yoast-components";
import { colors, SvgIcon, UpsellLinkButton, utils } from "yoast-components";
const TextContainer = styled.p`
color: ${ colors.$color_upsell_text };
margin: 0;
padding-right: 8px;
`;
const Container = styled.div`
font-size: 1em;
display: flex;
flex-direction: ${ props => props.alignment === "horizontal" ? "row" : "column" };
${ getRtlStyle( "border-left", "border-right" ) }: 4px solid ${ colors.$color_pink_dark };
margin: 16px 0;
padding: 0 0 0 8px;
max-width: 600px;
> ${ TextContainer } {
margin-bottom: ${ props => props.alignment === "vertical" && "16px" };
}
`;
const Caret = styled( SvgIcon )`
margin: ${ getRtlStyle( "0 0 0 4px", "0 4px 0 0" ) };
transform: ${ getRtlStyle( "rotate(0deg)", "rotate(180deg)" ) };
`;
const OutboundLinkButton = utils.makeOutboundLink( UpsellLinkButton );
const { getCourseFeed } = utils;
const CoursesList = styled.ul`
display: flex;
flex-wrap: wrap;
list-style-type: none;
padding: 0;
/* Max 5 cards per row. */
max-width: 1520px;
`;
const CourseListItem = styled.li`
/* Higher specificity to override WordPress margins. */
&& {
flex: 0 0 288px;
margin: ${ getRtlStyle( "0 16px 16px 0", "0 0 16px 16px" ) };
}
`;
/**
* @summary CoursesOverview component.
*/
class CoursesOverview extends React.Component {
/**
* Creates the components and initializes its state.
*/
constructor() {
super();
this.state = {
courses: null,