import React from 'react';
import { Flex, Text, Divider } from '@mantine/core';
import LocalIcon from '../../shared/LocalIcon';
import { Tooltip } from '../../shared/Tooltip';

export interface ToolWorkflowTitleProps {
  title: string;
  description?: string;
  tooltip?: {
    content?: React.ReactNode;
    tips?: any[];
    header?: {
      title: string;
      logo?: React.ReactNode;
    };
  };
}

export function ToolWorkflowTitle({ title, tooltip, description }: ToolWorkflowTitleProps) {
  const titleContent = (
    <Flex align="center" gap="xs" onClick={(e) => e.stopPropagation()}>
      <Text fw={500} size="lg" p="xs">
        {title}
      </Text>
      {tooltip && <LocalIcon icon="info-outline-rounded" width="1.25rem" height="1.25rem" style={{ color: 'var(--icon-files-color)' }} />}
    </Flex>
  );

  return (
    <>
      {tooltip ? (
        <Flex justify="center" w="100%">
          <Tooltip
            content={tooltip.content}
            tips={tooltip.tips}
            header={tooltip.header}
            sidebarTooltip={true}
          >
            {titleContent}
          </Tooltip>
        </Flex>
      ) : (
        titleContent
      )}

      <Text size="sm" mb="md" p="sm" style={{borderRadius:'var(--mantine-radius-md)', background: 'var(--color-gray-200)', color: 'var(--mantine-color-text)' }}>
        {description}
      </Text>
      <Divider mb="sm" />
    </>
  );
}