import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{memo,useCallback}from"react";import{breakpoints,Button,H2,LayoutVariant,LinkIcon}from"@redocly/theme";import{useNavigate}from"react-router-dom";import styled from"styled-components";import{useAtomValue}from"jotai";import{Row,SamplesMiddlePanel,ShareLink}from"../common";import{Markdown}from"../Markdown";import{OperationsNavigation}from"./OperationsNavigation";import{layoutAtom}from"../../jotai/app";export function TagItemComponent({item:t,routingBasePath:a="",isExpanded:o}){const{description:i,name:e,href:n}=t,r=useNavigate(),m=useAtomValue(layoutAtom),s=useCallback((()=>{r(a+t.href)}),[t.href,r,a]),d=Boolean(t.items.length),l=m===LayoutVariant.STACKED;return _jsxs(Wrapper,{expanded:o,children:[_jsxs(Row,{layout:m,children:[_jsxs(SamplesMiddlePanel,{fullWidth:!d,isStacked:l,children:[_jsxs(Heading,{children:[_jsx(ShareLink,{to:n,"aria-label":`link to ${e}`}),e]}),_jsx(Markdown,{source:i})]}),d&&_jsx(OperationsNavigation,{items:t.items,routingBasePath:a})]}),d&&!o&&_jsx(ShowButton,{type:"button",variant:"text",size:"medium",onClick:s,children:"+ Show"})]})}export const TagItem=memo(TagItemComponent);const Wrapper=styled.div`
  padding-top: var(--spacing-lg);
  padding-bottom: ${({expanded:t})=>t?"var(--spacing-xxl)":""};
`,ShowButton=styled(Button)`
  margin: var(--spacing-md) var(--spacing-xl) var(--spacing-xxs);
  width: calc(100% - var(--spacing-xl) * 2);

  @media screen and (min-width: ${breakpoints.medium}) {
    --button-margin-md: calc(var(--spacing-xl) * 2);

    margin-left: var(--button-margin-md);
    margin-right: var(--button-margin-md);
    width: calc(100% - var(--button-margin-md) * 2);
  }
`,Heading=styled(H2)`
  :hover {
    ${LinkIcon} {
      opacity: 1;
      visibility: visible;
    }
  }
`;
//# sourceMappingURL=TagItem.js.map