import svgPaths from './svg-aueiaqngck';

function Wrapper1({ children }: React.PropsWithChildren<{}>) {
  return (
    <div className="relative shrink-0 size-[16px]">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 16 16">
        {children}
      </svg>
    </div>
  );
}

function Wrapper({ children }: React.PropsWithChildren<{}>) {
  return (
    <div className="relative shrink-0 size-[24px]">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
        {children}
      </svg>
    </div>
  );
}

function Icon8({ children }: React.PropsWithChildren<{}>) {
  return (
    <Wrapper>
      <g id="<Icon>">{children}</g>
    </Wrapper>
  );
}

function Icon() {
  return (
    <Wrapper>
      <g id="PauseCircleOutlineOutlined">
        <path d={svgPaths.p3d4c2200} fill="var(--fill-0, #F8FAFC)" id="Vector" />
      </g>
    </Wrapper>
  );
}

function IconButton() {
  return (
    <div
      className="content-stretch flex flex-col h-[44px] items-center justify-center overflow-clip p-[8px] relative rounded-[100px] shrink-0 w-[45px]"
      data-name="<IconButton>"
    >
      <Icon />
    </div>
  );
}

function SliderRail() {
  return (
    <div
      className="absolute bg-[#f8fafc] h-[4px] left-0 opacity-[0.38] right-0 rounded-[100px] top-1/2 translate-y-[-50%]"
      data-name="_SliderRail"
    />
  );
}

function SliderTrack() {
  return (
    <div
      className="absolute bg-[#f8fafc] h-[6px] left-0 rounded-[100px] top-1/2 translate-y-[-50%] w-[47px]"
      data-name="_SliderTrack"
    />
  );
}

function SliderThumb() {
  return (
    <div
      className="absolute left-[38px] size-[20px] top-1/2 translate-y-[-50%]"
      data-name="_SliderThumb"
    >
      <div className="absolute inset-[-20%_-25%_-30%_-25%]">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 30 30">
          <g id="_SliderThumb">
            <rect fill="var(--fill-0, #F8FAFC)" height="20" rx="10" width="20" x="5" y="4" />
            <g filter="url(#filter0_ddd_6231_1949)" id="Color">
              <circle cx="15" cy="14" fill="var(--fill-0, #F8FAFC)" r="10" />
            </g>
          </g>
          <defs>
            <filter
              colorInterpolationFilters="sRGB"
              filterUnits="userSpaceOnUse"
              height="30"
              id="filter0_ddd_6231_1949"
              width="30"
              x="0"
              y="0"
            >
              <feFlood floodOpacity="0" result="BackgroundImageFix" />
              <feColorMatrix
                in="SourceAlpha"
                result="hardAlpha"
                type="matrix"
                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
              />
              <feMorphology
                in="SourceAlpha"
                operator="erode"
                radius="2"
                result="effect1_dropShadow_6231_1949"
              />
              <feOffset dy="3" />
              <feGaussianBlur stdDeviation="0.5" />
              <feComposite in2="hardAlpha" operator="out" />
              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" />
              <feBlend
                in2="BackgroundImageFix"
                mode="normal"
                result="effect1_dropShadow_6231_1949"
              />
              <feColorMatrix
                in="SourceAlpha"
                result="hardAlpha"
                type="matrix"
                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
              />
              <feOffset dy="2" />
              <feGaussianBlur stdDeviation="1" />
              <feComposite in2="hardAlpha" operator="out" />
              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0" />
              <feBlend
                in2="effect1_dropShadow_6231_1949"
                mode="normal"
                result="effect2_dropShadow_6231_1949"
              />
              <feColorMatrix
                in="SourceAlpha"
                result="hardAlpha"
                type="matrix"
                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
              />
              <feOffset dy="1" />
              <feGaussianBlur stdDeviation="2.5" />
              <feComposite in2="hardAlpha" operator="out" />
              <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
              <feBlend
                in2="effect2_dropShadow_6231_1949"
                mode="normal"
                result="effect3_dropShadow_6231_1949"
              />
              <feBlend
                in="SourceGraphic"
                in2="effect3_dropShadow_6231_1949"
                mode="normal"
                result="shape"
              />
            </filter>
          </defs>
        </svg>
      </div>
    </div>
  );
}

function Slider() {
  return (
    <div className="h-[44px] relative shrink-0 w-full" data-name="Slider">
      <SliderRail />
      <SliderTrack />
      <SliderThumb />
    </div>
  );
}

function Slider1() {
  return (
    <div
      className="basis-0 content-stretch flex flex-col grow items-start min-h-px min-w-px relative shrink-0"
      data-name="<Slider>"
    >
      <Slider />
    </div>
  );
}

function MinWidth() {
  return (
    <div
      className="absolute h-[4px] left-[calc(50%+0.5px)] top-1/2 translate-x-[-50%] translate-y-[-50%] w-[200px]"
      data-name="min-width"
    />
  );
}

function ProgressLinear() {
  return (
    <div
      className="basis-0 bg-[rgba(255,255,255,0)] content-stretch flex gap-[8px] grow h-[44px] items-center min-h-px min-w-px relative shrink-0"
      data-name="<Progress> | Linear"
    >
      <Slider1 />
      <MinWidth />
    </div>
  );
}

function Frame1() {
  return (
    <div className="basis-0 content-stretch flex grow items-center min-h-px min-w-px relative shrink-0">
      <IconButton />
      <ProgressLinear />
    </div>
  );
}

function Icon1() {
  return (
    <Icon8>
      <mask
        height="24"
        id="mask0_6231_1943"
        maskUnits="userSpaceOnUse"
        style={{ maskType: 'alpha' }}
        width="24"
        x="0"
        y="0"
      >
        <rect fill="var(--fill-0, #D9D9D9)" height="24" id="Bounding box" width="24" />
      </mask>
      <g mask="url(#mask0_6231_1943)">
        <path d={svgPaths.p309e9c00} fill="var(--fill-0, #F8FAFC)" id="volume_up" />
      </g>
    </Icon8>
  );
}

function IconButton1() {
  return (
    <div
      className="[grid-area:1_/_1] content-stretch flex flex-col h-[44px] items-center justify-center ml-0 mt-0 overflow-clip p-[8px] relative rounded-[100px] w-[45px]"
      data-name="<IconButton>"
    >
      <Icon1 />
    </div>
  );
}

function Icon2() {
  return (
    <Wrapper>
      <g id="RefreshOutlined">
        <path d={svgPaths.p3272e800} fill="var(--fill-0, #F8FAFC)" id="Vector" />
      </g>
    </Wrapper>
  );
}

function IconButton2() {
  return (
    <div
      className="[grid-area:1_/_1] content-stretch flex flex-col h-[44px] items-center justify-center ml-[45px] mt-0 overflow-clip p-[8px] relative rounded-[100px] w-[45px]"
      data-name="<IconButton>"
    >
      <Icon2 />
    </div>
  );
}

function Icon3() {
  return (
    <Wrapper>
      <g id="SlowMotionVideoOutlined">
        <path d={svgPaths.p29c42900} fill="var(--fill-0, #F8FAFC)" id="Vector" />
      </g>
    </Wrapper>
  );
}

function IconButton3() {
  return (
    <div
      className="[grid-area:1_/_1] content-stretch flex flex-col h-[44px] items-center justify-center ml-[90px] mt-0 overflow-clip p-[8px] relative rounded-[100px] w-[45px]"
      data-name="<IconButton>"
    >
      <Icon3 />
    </div>
  );
}

function Group1() {
  return (
    <div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid leading-[0] place-items-start relative shrink-0">
      <IconButton1 />
      <IconButton2 />
      <IconButton3 />
    </div>
  );
}

function Frame2() {
  return (
    <div className="absolute content-stretch flex gap-[9px] h-[44px] items-center left-[444.5px] top-[8px] w-[562px]">
      <Frame1 />
      <p
        className="font-['Roboto:Regular',sans-serif] font-normal leading-[20px] relative shrink-0 text-[#f8fafc] text-[14px] text-justify tracking-[0.25px] w-[85px]"
        style={{ fontVariationSettings: "'wdth' 100" }}
      >
        00:00/20:00
      </p>
      <Group1 />
    </div>
  );
}

function InfoFilled() {
  return (
    <Wrapper1>
      <g clipPath="url(#clip0_6231_1937)" id="InfoFilled">
        <g filter="url(#filter0_d_6231_1937)" id="Vector">
          <path d={svgPaths.p73d570} fill="var(--fill-0, #FF7000)" />
        </g>
      </g>
      <defs>
        <filter
          colorInterpolationFilters="sRGB"
          filterUnits="userSpaceOnUse"
          height="21.3333"
          id="filter0_d_6231_1937"
          width="21.3333"
          x="-2.66667"
          y="1.33333"
        >
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset dy="4" />
          <feGaussianBlur stdDeviation="2" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
          <feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_6231_1937" />
          <feBlend
            in="SourceGraphic"
            in2="effect1_dropShadow_6231_1937"
            mode="normal"
            result="shape"
          />
        </filter>
        <clipPath id="clip0_6231_1937">
          <rect fill="white" height="16" width="16" />
        </clipPath>
      </defs>
    </Wrapper1>
  );
}

function Icon4() {
  return (
    <Wrapper>
      <g id="CachedOutlined">
        <path d={svgPaths.pa47c180} fill="var(--fill-0, #F8FAFC)" id="Vector" />
      </g>
    </Wrapper>
  );
}

function IconButton4() {
  return (
    <div
      className="content-stretch flex flex-col h-[44px] items-center justify-center overflow-clip p-[8px] relative rounded-[100px] shrink-0 w-[45px]"
      data-name="<IconButton>"
    >
      <Icon4 />
      <div
        className="absolute bg-[rgba(0,0,0,0.12)] left-[calc(50%+0.5px)] rounded-[100px] size-[36px] top-1/2 translate-x-[-50%] translate-y-[-50%]"
        data-name="focusRipple"
      />
    </div>
  );
}

function Icon5() {
  return (
    <Wrapper>
      <g id="FileDownloadOutlined">
        <path d={svgPaths.pf91a580} fill="var(--fill-0, #F8FAFC)" id="Vector" />
      </g>
    </Wrapper>
  );
}

function IconButton5() {
  return (
    <div
      className="content-stretch flex flex-col h-[44px] items-center justify-center overflow-clip p-[8px] relative rounded-[100px] shrink-0 w-[45px]"
      data-name="<IconButton>"
    >
      <Icon5 />
    </div>
  );
}

function Icon6() {
  return (
    <Icon8>
      <path d={svgPaths.p3fd9e500} fill="var(--fill-0, #F8FAFC)" id="Vector" />
    </Icon8>
  );
}

function IconButton6() {
  return (
    <div
      className="content-stretch flex flex-col h-[44px] items-center justify-center overflow-clip p-[8px] relative rounded-[100px] shrink-0 w-[45px]"
      data-name="<IconButton>"
    >
      <Icon6 />
    </div>
  );
}

function Frame() {
  return (
    <div className="absolute content-stretch flex items-center justify-end left-[1096px] top-[9px] w-[191px]">
      <InfoFilled />
      <IconButton4 />
      <IconButton5 />
      <IconButton6 />
    </div>
  );
}

function Typography() {
  return (
    <div
      className="content-stretch flex flex-col items-start relative shrink-0"
      data-name="<Typography>"
    >
      <p
        className="font-['Roboto:Medium',sans-serif] font-medium leading-[1.5] relative shrink-0 text-[#f8fafc] text-[16px] text-nowrap tracking-[0.15px]"
        style={{ fontVariationSettings: "'wdth' 100" }}
      >{`Processo 50002396220258210104  `}</p>
    </div>
  );
}

function Frame4() {
  return (
    <div className="content-stretch flex gap-[8px] items-center relative shrink-0 w-[349px]">
      <Typography />
    </div>
  );
}

function Icon7() {
  return (
    <Wrapper1>
      <g id="<Icon>">
        <mask
          height="16"
          id="mask0_6231_1918"
          maskUnits="userSpaceOnUse"
          style={{ maskType: 'alpha' }}
          width="16"
          x="0"
          y="0"
        >
          <rect fill="var(--fill-0, #D9D9D9)" height="16" id="Bounding box" width="16" />
        </mask>
        <g mask="url(#mask0_6231_1918)">
          <path d={svgPaths.p1a05300} fill="var(--fill-0, white)" id="conversion_path" />
        </g>
      </g>
    </Wrapper1>
  );
}

function Frame5() {
  return (
    <div className="content-stretch flex gap-px items-center relative shrink-0 w-[214px]">
      <p
        className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.66] relative shrink-0 text-[#f8fafc] text-[0px] text-[12px] text-justify text-nowrap tracking-[0.4px]"
        style={{ fontVariationSettings: "'wdth' 100" }}
      >
        <span>{`Podcast atualizado até `}</span>
        <span
          className="[text-decoration-skip-ink:none] [text-underline-position:from-font] decoration-solid underline"
          style={{ fontVariationSettings: "'wdth' 100" }}
        >
          Evento 26
        </span>
      </p>
      <Icon7 />
    </div>
  );
}

function Frame3() {
  return (
    <div className="absolute content-stretch flex flex-col items-start left-[23px] top-[8px]">
      <Frame4 />
      <Frame5 />
    </div>
  );
}

function Tooltip() {
  return (
    <div
      className="absolute bg-[#49454f] content-stretch flex items-center left-[711px] px-[13px] py-[7px] rounded-[6px] shadow-[0px_2px_4px_0px_rgba(30,41,59,0.25)] top-[-66px] w-[446px]"
      data-name="tooltip"
    >
      <p
        className="basis-0 font-['Roboto:Regular',sans-serif] font-normal grow leading-[1.43] min-h-px min-w-px relative shrink-0 text-[#f8fafc] text-[14px] tracking-[0.17px]"
        style={{ fontVariationSettings: "'wdth' 100" }}
      >{`Identificamos a entrada de novos eventos neste processo desde a última atualização deste podcast. Recomendamos que o atualize uma nova versão clicando no botão ao lado. `}</p>
    </div>
  );
}

function Group() {
  return (
    <div className="absolute contents left-[711px] top-[-66px]">
      <Tooltip />
    </div>
  );
}

export default function Podcast() {
  return (
    <div
      className="backdrop-blur-[5.75px] backdrop-filter bg-[rgba(23,26,51,0.7)] relative shadow-[0px_4px_13.8px_0px_rgba(0,0,0,0.25)] size-full"
      data-name="Podcast"
    >
      <Frame2 />
      <Frame />
      <Frame3 />
      <Group />
      <div className="absolute inset-0 pointer-events-none shadow-[inset_0px_-2px_4px_0px_rgba(0,0,0,0.25)]" />
    </div>
  );
}
