import { type LibrariesSidebarProps } from '@composed-components/LibrariesSidebar';
import Skeleton from '@design-system/Skeleton';
import Title from '@design-system/Title';
import { useTheme } from '@mui/material';
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import { IconArrowLeft } from '@tabler/icons-react';

export type SidebarHeaderProps = Pick<
  LibrariesSidebarProps,
  'onBack' | 'loading'
> & {
  title: string;
  hide?: boolean;
};

export const SidebarHeader = ({
  title,
  onBack,
  hide,
  loading,
}: SidebarHeaderProps) => {
  const { palette } = useTheme();

  if (hide) return null;

  return (
    <Stack
      className="sidebar-header"
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: palette.new.background.elements.brand,
        py: 1.5,
        pl: 1,
        pr: 2,
        gap: 1,
      }}
    >
      {loading && (
        <>
          <Skeleton
            width={40}
            height={40}
          />
          <Skeleton
            width={100}
            height={25}
          />
        </>
      )}
      {!loading && (
        <>
          <IconButton
            aria-label={title}
            onClick={onBack}
            sx={{ '& svg': { stroke: palette.new.text.neutral.brand } }}
          >
            <IconArrowLeft />
          </IconButton>

          <Title
            title={title}
            variant="M"
            fontWeight="fontWeightSemiBold"
            slotProps={{
              title: { sx: { color: palette.new.text.neutral.brand } },
            }}
            overflow="tooltip"
            withEllipsis
          />
        </>
      )}
    </Stack>
  );
};
