import { Icon } from "@iconify/react";
import PropTypes from "prop-types";
import { useEffect, useMemo, useState } from "react";
import { NavLink } from "react-router-dom";
import { getUnreadNovedades, NOVEDADES_SEEN_EVENT } from "../../../utils/novedadesSeen";
import styled, { useTheme } from "styled-components";
import { ASSETS } from "../../../config/assets";
import { UserAuth } from "../../../context/AuthContent";
import { useMenuAcceso } from "../../../hooks/useMenuAcceso";
import {
    LinksArray,
    SecondarylinksArray,
    ToggleTema,
    useAuthStore,
} from "../../../index";
import { ColorPicker } from "../ColorPicker";
import { RubroSelector } from "../../_standards/RubroSelector";
import { AlertasCampanaPanel } from "../../_standards/AlertasCampanaPanel";
import { CRITICIDAD_ALERTA } from "../../_standards/enums";
import { useAlertasEmpresaQuery } from "../../../tanstack/AlertasEmpresaStack";
import { NOVAIA_NUEVO_HASTA, useAyudaIaStore } from "../../ayuda-ia/ayudaIaStore";
import { hoyISO } from "../../../utils/fecha";

export function Sidebar({ state, setState }) {
  const { cerrarSesion } = useAuthStore();
  const { user } = UserAuth();
  const theme = useTheme();
  const isLight = theme.body === "#ffffff";
  const sidebarLogo = isLight ? ASSETS.logo.light : ASSETS.logo.dark;

  // Filtro y agrupación compartidos con el home, para que ambos muestren
  // exactamente lo mismo ante el mismo perfil.
  const { puedeVer, agrupar } = useMenuAcceso();

  // Contador de novedades no leídas para el badge del menú.
  const [unreadNovedades, setUnreadNovedades] = useState(getUnreadNovedades());
  useEffect(() => {
    const update = () => setUnreadNovedades(getUnreadNovedades());
    window.addEventListener(NOVEDADES_SEEN_EVENT, update);
    window.addEventListener("storage", update);
    return () => {
      window.removeEventListener(NOVEDADES_SEEN_EVENT, update);
      window.removeEventListener("storage", update);
    };
  }, []);

  // Campana: alertas de la empresa (no leídas por este usuario) + novedades.
  // Ver docs/plan-alertas-empresa.md en el backend.
  const { data: alertas = [] } = useAlertasEmpresaQuery();
  const alertasSinLeer = alertas.filter((a) => !a.leida);
  const hayCriticaSinLeer = alertasSinLeer.some((a) => a.criticidad === CRITICIDAD_ALERTA.ALTA.value);
  const totalCampana = alertasSinLeer.length + unreadNovedades;
  const [campanaAnchor, setCampanaAnchor] = useState(null);

  const abrirNovaIa = useAyudaIaStore((s) => s.abrir);
  const novaIaEsNuevo = hoyISO() < NOVAIA_NUEVO_HASTA;

  const filteredLinks = LinksArray.filter(puedeVer);
  const filteredSecondaryLinks = SecondarylinksArray.filter(puedeVer);

  // Agrupar links por módulo raíz manteniendo el orden de primer aparición.
  // Los items con `modulos` array o sin `modulo` van a un grupo "Otros".
  const groupedLinks = useMemo(() => agrupar(filteredLinks), [filteredLinks, agrupar]);

  // Estado de expansión por módulo raíz (default: cerrado).
  const [expanded, setExpanded] = useState({});
  const toggle = (codigo) =>
    setExpanded((prev) => ({ ...prev, [codigo]: !prev[codigo] }));

  return (
    <Main $isopen={state.toString()}>
      <ToggleButton $isopen={state.toString()} onClick={() => setState(!state)}>
        <Icon icon={state ? "lucide:chevron-left" : "lucide:chevron-right"} />
      </ToggleButton>

      <Container $isopen={state.toString()} className={state ? "active" : ""} id="sidebar-menu">
        {/* Logo Section */}
        <LogoSection $isopen={state.toString()}>
          <LogoWrapper $isopen={state.toString()}>
            {/* El logo vuelve al inicio: es la convención que todo el mundo
                espera y funciona igual con la barra colapsada. */}
            <NavLink to="/" title="Ir al inicio" aria-label="Ir al inicio">
              <img src={sidebarLogo} alt="Novasis — ir al inicio" />
            </NavLink>
          </LogoWrapper>
        </LogoSection>

        {/* User & Company Info - Arriba del menú */}
        {user && (
          <UserCompanySection $isopen={state.toString()}>
            {state ? (
              <>
                <UserInfoTop>
                  <UserAvatarTop>
                    {user.nombre?.charAt(0)?.toUpperCase() || "U"}
                  </UserAvatarTop>
                  <UserDetailsTop>
                    <UserNameTop>
                      {user.nombres || user.apellidos || "Usuario"}
                    </UserNameTop>
                    <UserEmailTop>{user.email || ""}</UserEmailTop>
                  </UserDetailsTop>
                  <BellButton
                    type="button"
                    onClick={(e) => setCampanaAnchor(e.currentTarget)}
                    title="Alertas y novedades"
                    aria-label="Alertas y novedades"
                    $abierto={Boolean(campanaAnchor)}
                  >
                    <Icon icon={hayCriticaSinLeer ? "lucide:bell-ring" : "lucide:bell"} />
                    {totalCampana > 0 && (
                      <BellCount $critica={hayCriticaSinLeer}>
                        {totalCampana > 9 ? "9+" : totalCampana}
                      </BellCount>
                    )}
                  </BellButton>
                </UserInfoTop>
                {user.empresa && (
                  <CompanyBadge>
                    <Icon icon="lucide:building-2" />
                    <span>{user.empresa.razon_social}</span>
                  </CompanyBadge>
                )}
                {/* Segunda línea del contexto: empresa y, si la empresa usa
                    rubros, en cuál está trabajando. No se dibuja si tiene uno
                    solo o ninguno. */}
                <RubroSelector />
              </>
            ) : (
              <>
                <UserAvatarSmall title={user.nombre || "Usuario"}>
                  {user.nombre?.charAt(0)?.toUpperCase() || "U"}
                </UserAvatarSmall>
                <BellButton
                  type="button"
                  onClick={(e) => setCampanaAnchor(e.currentTarget)}
                  title="Alertas y novedades"
                  aria-label="Alertas y novedades"
                  $collapsed
                  $abierto={Boolean(campanaAnchor)}
                >
                  <Icon icon={hayCriticaSinLeer ? "lucide:bell-ring" : "lucide:bell"} />
                  {totalCampana > 0 && <BellDotSmall $critica={hayCriticaSinLeer} />}
                </BellButton>
                <RubroSelector colapsado />
              </>
            )}
          </UserCompanySection>
        )}

        <Divider />

        {/* Main Navigation */}
        <NavSection>
          {state && <SectionLabel>MENÚ PRINCIPAL</SectionLabel>}

          {/* NovaIA: acceso fijo en el menú en vez de un botón flotante que
              tapaba paginaciones y barras de acciones. */}
          <NavItem $isopen={state.toString()}>
            <NovaIaButton
              type="button"
              onClick={abrirNovaIa}
              $isopen={state.toString()}
              title={state ? "Atajo: Ctrl + /" : "NovaIA — Tu Asistente ERP (Ctrl + /)"}
            >
              <IconWrapper>
                <Icon icon="mdi:auto-awesome" />
                {!state && novaIaEsNuevo && <BadgeDot />}
              </IconWrapper>
              {state && (
                <NovaIaTexto>
                  <NovaIaTitulo>
                    <NavLabel>NovaIA</NavLabel>
                    {novaIaEsNuevo && <BadgeTag>Nuevo</BadgeTag>}
                  </NovaIaTitulo>
                  <NovaIaHint>Preguntá cómo hacer algo</NovaIaHint>
                </NovaIaTexto>
              )}
            </NovaIaButton>
          </NavItem>

          {/* Sidebar colapsada (80px): lista plana como siempre */}
          {!state &&
            filteredLinks.map(({ icon, label, to, badge }) => (
              <NavItem key={label} $isopen={state.toString()}>
                <StyledNavLink to={to} $isopen={state.toString()} title={label}>
                  {({ isActive }) => (
                    <>
                      {isActive && <ActiveIndicator />}
                      <IconWrapper $isActive={isActive}>
                        <Icon icon={icon} />
                        {badge && <BadgeDot />}
                      </IconWrapper>
                    </>
                  )}
                </StyledNavLink>
              </NavItem>
            ))}

          {/* Sidebar expandida: agrupar por módulo raíz */}
          {state &&
            groupedLinks.map(({ codigo, items, meta }) => {
              // Grupo con 1 solo item o sin metadata → render plano
              if (items.length === 1 || !meta) {
                return items.map(({ icon, label, to, badge }) => (
                  <NavItem key={label} $isopen="true">
                    <StyledNavLink to={to} $isopen="true">
                      {({ isActive }) => (
                        <>
                          {isActive && <ActiveIndicator />}
                          <IconWrapper $isActive={isActive}>
                            <Icon icon={icon} />
                          </IconWrapper>
                          <NavLabel $isActive={isActive}>{label}</NavLabel>
                          {badge && <BadgeTag>{badge}</BadgeTag>}
                        </>
                      )}
                    </StyledNavLink>
                  </NavItem>
                ));
              }

              // Grupo con 2+ items → header expandible
              const isExpanded = !!expanded[codigo];
              // Usar el icono del primer item del grupo como fallback (garantizado que carga).
              const groupIcon = meta.icon || items[0]?.icon;
              return (
                <GroupWrapper key={codigo}>
                  <GroupHeader
                    type="button"
                    onClick={() => toggle(codigo)}
                    $isExpanded={isExpanded}
                  >
                    <IconWrapper $isActive={isExpanded}>
                      <Icon icon={groupIcon} />
                    </IconWrapper>
                    <NavLabel $isActive={isExpanded}>{meta.label}</NavLabel>
                    <GroupChevron
                      icon={isExpanded ? "lucide:chevron-down" : "lucide:chevron-right"}
                    />
                  </GroupHeader>
                  {isExpanded && (
                    <GroupChildren>
                      {items.map(({ icon, label, to, badge }) => (
                        <NavItem key={label} $isopen="true">
                          <StyledNavLink to={to} $isopen="true">
                            {({ isActive }) => (
                              <>
                                {isActive && <ActiveIndicator />}
                                <IconWrapper $isActive={isActive}>
                                  <Icon icon={icon} />
                                </IconWrapper>
                                <NavLabel $isActive={isActive}>{label}</NavLabel>
                                {badge && <BadgeTag>{badge}</BadgeTag>}
                              </>
                            )}
                          </StyledNavLink>
                        </NavItem>
                      ))}
                    </GroupChildren>
                  )}
                </GroupWrapper>
              );
            })}
        </NavSection>

        <Divider />

        {/* Secondary Navigation */}
        <NavSection>
          {state && <SectionLabel>SISTEMA</SectionLabel>}
          {filteredSecondaryLinks.map(({ icon, label, to }) => (
            <NavItem key={label} $isopen={state.toString()}>
              <StyledNavLink
                to={to}
                $isopen={state.toString()}
                title={!state ? label : undefined}
              >
                {({ isActive }) => (
                  <>
                    {isActive && <ActiveIndicator />}
                    <IconWrapper $isActive={isActive} $secondary>
                      <Icon icon={icon} />
                    </IconWrapper>
                    {state && <NavLabel $isActive={isActive}>{label}</NavLabel>}
                  </>
                )}
              </StyledNavLink>
            </NavItem>
          ))}

          {/* Logout Button */}
          <NavItem $isopen={state.toString()}>
            <LogoutButton
              onClick={cerrarSesion}
              $isopen={state.toString()}
              title={!state ? "Cerrar sesión" : undefined}
            >
              <IconWrapper $logout>
                <Icon icon="lucide:log-out" />
              </IconWrapper>
              {state && <NavLabel>Cerrar sesión</NavLabel>}
            </LogoutButton>
          </NavItem>
        </NavSection>

        {/* Footer with Theme Toggle */}
        <FooterSection $isopen={state.toString()}>
          <Divider />
          <ThemeWrapper $isopen={state.toString()}>
            <ToggleTema />
            <ColorPicker />
          </ThemeWrapper>
        </FooterSection>
      </Container>
      <AlertasCampanaPanel
        open={Boolean(campanaAnchor)}
        anchorEl={campanaAnchor}
        onClose={() => setCampanaAnchor(null)}
        alertas={alertas}
        novedadesSinLeer={unreadNovedades}
      />
    </Main>
  );
}

Sidebar.propTypes = {
  state: PropTypes.bool.isRequired,
  setState: PropTypes.func.isRequired,
};

const Main = styled.div`
  position: relative;
`;

const ToggleButton = styled.button`
  position: fixed;
  top: 28px;
  left: ${({ $isopen }) => ($isopen === "true" ? "244px" : "68px")};
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: ${({ theme }) => theme.bg3};
  border: 1px solid ${({ theme }) => theme.bg4};
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  color: ${({ theme }) => theme.text};

  &:hover {
    background: ${({ theme }) => theme.bg5};
    transform: scale(1.1);
  }

  svg {
    width: 16px;
    height: 16px;
  }
`;

const Container = styled.div`
  background: ${({ theme }) => theme.bgtotal};
  color: ${({ theme }) => theme.text};
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  height: 100vh;
  width: ${({ $isopen }) => ($isopen === "true" ? "260px" : "80px")};
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid ${({ theme }) => theme.bg4};
  display: flex;
  flex-direction: column;

  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: ${({ theme }) => theme.bg4};
    border-radius: 4px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
`;

const LogoSection = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  padding: ${({ $isopen }) => ($isopen === "true" ? "12px 12px" : "12px 6px")};
  margin-bottom: 4px;
`;

const LogoWrapper = styled.div`
  width: ${({ $isopen }) => ($isopen === "true" ? "100%" : "36px")};
  max-width: 180px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.3s ease;

  img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
`;

const NavSection = styled.nav`
  display: flex;
  flex-direction: column;
  padding: 0 12px;
  flex: 1;
`;

const SectionLabel = styled.span`
  font-size: 0.65rem;
  font-weight: 600;
  color: ${({ theme }) => theme.textSecondary || theme.text}80;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 16px 12px 8px;
  white-space: nowrap;
`;

const NavItem = styled.div`
  margin: 2px 0;
  position: relative;
`;

const StyledNavLink = styled(NavLink)`
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 10px;
  text-decoration: none;
  color: ${({ theme }) => theme.text};
  transition: all 0.2s ease;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  justify-content: ${({ $isopen }) =>
    $isopen === "true" ? "flex-start" : "center"};

  &:hover {
    background: ${({ theme }) => theme.bg3}40;
  }

  &.active {
    background: ${({ theme }) => theme.bg5}60;
  }
`;

const ActiveIndicator = styled.div`
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  background: linear-gradient(180deg, #f88533 0%, #ff6b6b 100%);
  border-radius: 0 4px 4px 0;
`;

const IconWrapper = styled.div`
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: ${({ $isActive, theme }) =>
    $isActive ? `${theme.bg5}80` : "transparent"};
  transition: all 0.2s ease;
  flex-shrink: 0;

  svg {
    width: 22px;
    height: 22px;
    opacity: ${({ $isActive }) => ($isActive ? 1 : 0.7)};
    color: ${({ $isActive, theme }) => ($isActive ? "#f88533" : theme.text)};
    transition: all 0.2s ease;
  }

  ${({ $logout }) =>
    $logout &&
    `
    svg {
      color: #ef4444;
      filter: none;
    }
  `}
`;

const NavLabel = styled.span`
  font-size: 0.875rem;
  font-weight: ${({ $isActive }) => ($isActive ? 600 : 500)};
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
  color: ${({ $isActive, theme }) =>
    $isActive ? theme.text : `${theme.text}cc`};
`;

const LogoutButton = styled.button`
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: ${({ theme }) => theme.text};
  cursor: pointer;
  width: 100%;
  transition: all 0.2s ease;
  justify-content: ${({ $isopen }) =>
    $isopen === "true" ? "flex-start" : "center"};

  &:hover {
    background: #ef444420;
  }
`;

const NovaIaButton = styled.button`
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #0ea5e940;
  background: linear-gradient(135deg, #2563eb14 0%, #0ea5e914 100%);
  color: ${({ theme }) => theme.text};
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  transition: background 0.2s ease;
  justify-content: ${({ $isopen }) => ($isopen === "true" ? "flex-start" : "center")};

  svg {
    color: #0ea5e9;
    opacity: 1;
  }

  &:hover {
    background: linear-gradient(135deg, #2563eb2e 0%, #0ea5e92e 100%);
  }
`;

const NovaIaTexto = styled.span`
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  gap: 2px;
`;

const NovaIaTitulo = styled.span`
  display: flex;
  align-items: center;
  gap: 8px;
`;

const NovaIaHint = styled.span`
  font-size: 0.72rem;
  line-height: 1.2;
  color: ${({ theme }) => theme.text}99;
`;

const FooterSection = styled.div`
  margin-top: auto;
  padding: 12px;
`;

const UserCompanySection = styled.div`
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  align-items: ${({ $isopen }) => ($isopen === "true" ? "stretch" : "center")};
  gap: 8px;
`;

const UserInfoTop = styled.div`
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: ${({ theme }) => theme.bg3}40;
  border-radius: 12px;
`;

const UserAvatarTop = styled.div`
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f88533 0%, #ff6b6b 100%);
  border-radius: 50%;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 1.1rem;
  color: white;
`;

const UserAvatarSmall = styled.div`
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f88533 0%, #ff6b6b 100%);
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
  color: white;
  cursor: default;
`;

const UserDetailsTop = styled.div`
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
`;

const UserNameTop = styled.span`
  font-size: 0.9rem;
  font-weight: 600;
  color: ${({ theme }) => theme.text};
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

const UserEmailTop = styled.span`
  font-size: 0.75rem;
  color: ${({ theme }) => theme.text}80;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

const CompanyBadge = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #f8853315 0%, #ff6b6b15 100%);
  border: 1px solid #f8853340;
  border-radius: 8px;

  svg {
    width: 14px;
    height: 14px;
    color: #f88533;
    flex-shrink: 0;
  }

  span {
    font-size: 0.75rem;
    font-weight: 600;
    color: #f88533;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
`;

const ThemeWrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
`;

const Divider = styled.div`
  height: 1px;
  background: ${({ theme }) => theme.bg4};
  margin: 8px 12px;
`;

const BadgeTag = styled.span`
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  flex-shrink: 0;
`;

const BadgeDot = styled.span`
  position: absolute;
  top: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6366f1;
  border: 1.5px solid ${({ theme }) => theme.bg2};
`;

// Campanita de novedades: ícono chico, no invasivo, integrado en el header.
const BellButton = styled.button`
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: ${({ theme }) => theme.text};
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-top: ${({ $collapsed }) => ($collapsed ? "8px" : "0")};

  svg {
    width: 19px;
    height: 19px;
    opacity: 0.8;
  }

  &:hover {
    background: ${({ theme }) => theme.bg3}60;
  }

  svg {
    color: ${({ $abierto }) => ($abierto ? "#f88533" : "inherit")};
  }
`;

const BellCount = styled.span`
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  /* Rojo sólo si hay una alerta crítica sin leer; si no, el naranja de la marca. */
  background: ${({ $critica }) => ($critica ? "#ef4444" : "#f88533")};
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  border: 1.5px solid ${({ theme }) => theme.bgtotal};
`;

const BellDotSmall = styled.span`
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: ${({ $critica }) => ($critica ? "#ef4444" : "#f88533")};
  border: 1.5px solid ${({ theme }) => theme.bgtotal};
`;

const GroupWrapper = styled.div`
  margin: 2px 0;
`;

const GroupHeader = styled.button`
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 10px;
  border: none;
  margin: 0;
  font-size: inherit;
  font-family: inherit;
  text-align: left;
  background: ${({ $isExpanded, theme }) =>
    $isExpanded ? `${theme.bg3}30` : "transparent"};
  color: ${({ theme }) => theme.text};
  cursor: pointer;
  transition: background 0.2s ease;
  position: relative;

  &:hover {
    background: ${({ theme }) => theme.bg3}40;
  }
`;

const GroupChevron = styled(Icon)`
  margin-left: auto;
  width: 16px !important;
  height: 16px !important;
  opacity: 0.7;
`;

const GroupChildren = styled.div`
  display: flex;
  flex-direction: column;
  padding-left: 14px;
  margin: 2px 0 6px;
  border-left: 1px solid ${({ theme }) => theme.bg4};
  margin-left: 24px;
`;