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
19    className={mergeClasses(
20      'flex pl-4 overflow-hidden justify-between bg-default border border-default rounded-t-md border-b-0 min-h-[40px]',
21      Icon && 'pl-3',
22      alwaysDark && 'dark-theme pr-2 dark:border-transparent !bg-palette-gray3'
23    )}>
24    <LABEL
25      className={mergeClasses(
26        'flex items-center gap-2 h-10 !leading-10 pr-4 select-none font-medium text-ellipsis whitespace-nowrap overflow-hidden',
27        alwaysDark && 'text-palette-white'
28      )}>
29      {Icon && <Icon className="icon-sm" />}
30      {title}
31    </LABEL>
32    {!!children && <div className="flex justify-end items-center">{children}</div>}
33  </div>
34);
35