import React from 'react';
import { useNavigate } from 'react-router-dom';
import { HelpCircle } from 'lucide-react';
import { XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite';
import { useTranslation } from 'react-i18next';

import { adminPath } from '../../constants';
import { useAdminTheme } from '../theme';

type ContextHelpLinkProps = {
  slug: string;
  label?: string;
};

export function ContextHelpLink({ slug, label }: ContextHelpLinkProps) {
  const navigate = useNavigate();
  const { t } = useTranslation('common');
  const { border, primary, surfaceMuted, textStrong } = useAdminTheme();
  const resolvedLabel = label ?? t('common.help', 'Help');

  return (
    <Pressable
      onPress={() => navigate(adminPath(`/mobile/help/${encodeURIComponent(slug)}`))}
      aria-label={resolvedLabel}
    >
      <XStack
        alignItems="center"
        space="$1.5"
        paddingHorizontal="$2.5"
        paddingVertical="$1.5"
        borderRadius={999}
        borderWidth={1}
        borderColor={border}
        backgroundColor={surfaceMuted}
      >
        <HelpCircle size={14} color={primary} />
        <Text fontSize="$xs" fontWeight="700" color={textStrong}>
          {resolvedLabel}
        </Text>
      </XStack>
    </Pressable>
  );
}