import React, { useCallback } from 'react';
import { Stack, Text, Divider, Card, Group } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { useSuggestedTools } from '../../../hooks/useSuggestedTools';
import { useNavigationActions, useNavigationState, type ModeType } from '../../../contexts/NavigationContext';

export interface SuggestedToolsSectionProps {}

export function SuggestedToolsSection(): React.ReactElement {
  const { t } = useTranslation();
  const { actions } = useNavigationActions();
  const { currentMode } = useNavigationState();
  
  // Create handleToolSelect function that navigates to the tool
  const handleToolSelect = useCallback((toolId: string) => {
    actions.setMode(toolId as ModeType);
  }, [actions]);
  
  const suggestedTools = useSuggestedTools(currentMode, handleToolSelect);

  return (
    <Stack gap="md">
      <Divider />

      <Text size="lg" fw={600}>
        {t('editYourNewFiles', 'Edit your new file(s)')}
      </Text>

      <Stack gap="xs">
        {suggestedTools.map((tool) => {
          const IconComponent = tool.icon;
          return (
            <Card
              key={tool.name}
              p="sm"
              withBorder
              style={{ cursor: 'pointer' }}
              onClick={tool.navigate}
            >
              <Group gap="xs">
                <IconComponent fontSize="small" />
                <Text size="sm" fw={500}>
                  {tool.title}
                </Text>
              </Group>
            </Card>
          );
        })}
      </Stack>
    </Stack>
  );
}