text: import React, { useState } from "react";
  import { Link as ReactRouterLink } from "react-router-dom";
  import {
    Background,
    Container,
    ButtonLink,
    Logo,
    Link,
    Group,
    Text,
    Feature,
    FeatureCallOut,
    PlayButton,
    SearchIcon,
    SearchInput,
    Search,
    Profile,
    Picture,
    Dropdown,
  } from "./styles/header";
  
  export default function Header({ bg = true, children, ...restProps }) {
    return bg ? <Background {...restProps}>{children}</Background> : <div>{children}</div>;
  }
  
  Header.Frame = function HeaderFrame({ children, ...restProps }) {
    return <Container {...restProps}>{children}</Container>;
  };
  
  Header.Group = function HeaderGroup({ children, ...restProps }) {
    return <Group {...restProps}>{children}</Group>;
  };
  
  Header.Logo = function HeaderLogo({ to, ...restProps }) {
    return (
      <ReactRouterLink to={to}>
        <Logo {...restProps} />
      </ReactRouterLink>
    );
  };
  
  Header.Text = function HeaderText({ children, ...restProps }) {
    return <Text {...restProps}>{children}</Text>;
  };
  
  Header.Link = function HeaderLink({ children, ...restProps }) {
    return <Link {...restProps}>{children}</Link>;
  };
  
  Header.ButtonLink = function HeaderButtonLink({ children, ...restProps }) {
    return <ButtonLink {...restProps}>{children}</ButtonLink>;
  };
  
  Header.Feature = function HeaderFeature({ children, ...restProps }) {
    return <Feature {...restProps}>{children}</Feature>;
  };
  
  Header.FeatureCallOut = function HeaderFeatureCallOut({ children, ...restProps }) {
    return <FeatureCallOut {...restProps}>{children}</FeatureCallOut>;
  };
  
  Header.PlayButton = function HeaderPlayButton({ children, ...restProps }) {
    return <PlayButton {...restProps}>{children}</PlayButton>;
  };
  
  Header.Search = function HeaderSearch({ searchTerm, setSearchTerm, ...restProps }) {
    const [searchActive, setSearchActive] = useState(false);
    return (
      <Search {...restProps}>
        <SearchIcon onClick={() => setSearchActive(!searchActive)}>
          <img src="/images/icons/search.png" alt="search" />
        </SearchIcon>
        <SearchInput
          onChange={(e) => setSearchTerm(e.target.value)}
          value={searchTerm}
          placeholder="Search files and series"
          active={searchActive}
          type="text"
        />
      </Search>
    );
  };
  
  Header.Profile = function HeaderProfile({ children, ...restProps }) {
    return <Profile {...restProps}>{children}</Profile>;
  };
  
  Header.Picture = function HeaderPicture({ src, ...restProps }) {
    return <Picture {...restProps} src={`/images/users/${src}.png`} />;
  };
  
  Header.Dropdown = function HeaderDRopdown({ children, ...restProps }) {
    return <Dropdown {...restProps}>{children}</Dropdown>;
  };
  