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