import Clickable from '~/src/components/Clickable';
import CrossIconWrapper from '~/src/components/Icon/CrossIcon';
import Text from '~/src/components/Text';
import { useI18n } from '~/src/lib/i18n';
import { Layout } from '~/src/ui/layouts/layout';
import { LayoutGrid } from '~/src/ui/layouts/layoutGrid';

export const DialogHeader = ({
  onClose,
  title,
}: {
  onClose: () => void;
  title: string;
}) => {
  const { t } = useI18n('app');

  return (
    <LayoutGrid align="center">
      <Layout span="3">
        <Clickable onClick={onClose}>
          <CrossIconWrapper color="#999999" size={24} />
        </Clickable>
      </Layout>
      <Layout span="6" justify="center">
        <Text size="1.3rem" color="#999999" noWrap>
          {title}
        </Text>
      </Layout>
      <Layout span="3" justify="end" shrink>
        <Clickable onClick={onClose} width="auto">
          <Text size="1.4rem" weight="regular">
            {t('actions.done')}
          </Text>
        </Clickable>
      </Layout>
    </LayoutGrid>
  );
};