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