import e,{useState as a}from"react";import i from"styled-components";import{EditIcon as s}from"@redocly/theme";import{useTranslate as l}from"../../../../../client/app/hooks";import{EditAppDescriptionDialog as p}from"./EditAppDescriptionDialog";const D=({text:n})=>{const[o,t]=a(!1),{translate:r}=l();return e.createElement(e.Fragment,null,e.createElement(p,{open:o,onOpen:()=>t(!0),onClose:()=>t(!1),initialDescription:n}),e.createElement(c,null,e.createElement(m,{"data-translation-key":"dev.app.description.title"},r("dev.app.description.title","Description")),e.createElement(s,{onClick:()=>t(!0)})),e.createElement(d,null,n))},c=i.div`
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);

  svg {
    cursor: pointer;
  }
`,m=i.div`
  font-weight: var(--font-weight-bold);
`,d=i.div`
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  max-width: 50%;
  text-align: justify;
`;export{D as Description};
