import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../constants/uiColors';

interface IBaseTooltipProps {
  children: React.ReactNode;
  width?: string;
}

const TooltipContainer = styled.div<{ width?: string }>`
  background-color: rgba(0, 0, 0, 0.95);
  border-radius: 4px;
  padding: 8px;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.6rem;
  width: ${props => props.width || '280px'};
  border: 1px solid ${uiColors.darkGray};
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
`;

export const TooltipTitle = styled.div`
  color: ${uiColors.yellow};
  font-size: 0.6rem;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
`;

export const Section = styled.div`
  margin-top: 6px;
`;

export const SectionTitle = styled.div`
  color: ${uiColors.yellow};
  font-size: 0.5rem;
  margin-bottom: 4px;
  opacity: 0.7;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 4px;
`;

export const StatsContainer = styled.div`
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 8px;
`;

export const StatItem = styled.div`
  color: ${uiColors.white};
  font-size: 0.5rem;
  text-align: left;
`;

export const BaseTooltip: React.FC<IBaseTooltipProps> = ({
  children,
  width,
}) => {
  return <TooltipContainer width={width}>{children}</TooltipContainer>;
};

export default BaseTooltip;
