1import { mergeClasses } from '@expo/styleguide';
2import { ReactNode, ComponentType, HTMLAttributes, PropsWithChildren } from 'react';
3
4import { LABEL } from '~/ui/components/Text';
5
6type SnippetHeaderProps = PropsWithChildren<{
7  title: string | ReactNode;
8  Icon?: ComponentType<HTMLAttributes<SVGSVGElement>>;
9  alwaysDark?: boolean;
10  float?: boolean;
11}>;
12
13export const SnippetHeader = ({
14  title,
15  children,
16  Icon,
17  float,
18  alwaysDark = false,
19}: SnippetHeaderProps) => (
20  <div
21    className={mergeClasses(
22      'flex pl-4 overflow-hidden justify-between bg-default border border-default min-h-[40px]',
23      !float && 'rounded-t-md border-b-0',
24      float && 'rounded-md my-4',
25      Icon && 'pl-3',
26      alwaysDark && 'dark-theme pr-2 dark:border-transparent !bg-palette-gray3'
27    )}>
28    <LABEL
29      className={mergeClasses(
30        'flex items-center gap-2 h-10 !leading-10 pr-4 select-none font-medium truncate',
31        alwaysDark && 'text-palette-white'
32      )}>
33      {Icon && <Icon className="icon-sm" />}
34      {title}
35    </LABEL>
36    {!!children && <div className="flex justify-end items-center">{children}</div>}
37  </div>
38);
39