import React from 'react';
import styled from 'styled-components';

import type { PageAction } from '@redocly/theme/core/types';

import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';

type PageActionsMenuItemProps = {
  pageAction: PageAction;
};

export function PageActionsMenuItem(props: PageActionsMenuItemProps) {
  const { pageAction } = props;

  return (
    <MenuItemWrapper data-component-name="PageActions/PageActionsMenuItem">
      <IconWrapper>
        <pageAction.iconComponent />
      </IconWrapper>
      <ContentWrapper>
        <Title>
          {pageAction.title}
          {'link' in pageAction ? (
            <LaunchIcon color="var(--page-actions-menu-item-title-icon-color)" size="14px" />
          ) : null}
        </Title>
        <Description>{pageAction.description}</Description>
      </ContentWrapper>
    </MenuItemWrapper>
  );
}

const MenuItemWrapper = styled.div`
  padding: var(--page-actions-menu-item-padding);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--page-actions-menu-item-gap);
`;

const IconWrapper = styled.div`
  color: var(--page-actions-menu-item-icon-color);
  border: 1px solid var(--page-actions-menu-item-icon-border-color);
  border-radius: var(--page-actions-menu-item-icon-border-radius);
  width: var(--page-actions-menu-item-icon-wrapper-size);
  height: var(--page-actions-menu-item-icon-wrapper-size);
  display: flex;
  align-items: center;
  justify-content: center;
`;

const ContentWrapper = styled.div`
  display: flex;
  flex-direction: column;
  gap: var(--page-actions-menu-item-text-gap);
`;

const Title = styled.div`
  font-weight: var(--page-actions-menu-item-title-font-weight);
  font-size: var(--page-actions-menu-item-title-font-size);
  line-height: var(--page-actions-menu-item-title-line-height);
  color: var(--page-actions-menu-item-title-color);
  display: flex;
  align-items: center;
  gap: var(--page-actions-menu-item-title-icon-gap);
`;

const Description = styled.div`
  font-weight: var(--page-actions-menu-item-description-font-weight);
  font-size: var(--page-actions-menu-item-description-font-size);
  line-height: var(--page-actions-menu-item-description-line-height);
  color: var(--page-actions-menu-item-description-color);
`;