import { XAxisProps, YAxisProps } from "recharts";

const axisStrokeColor = '#D8D8D8';
const strokeDasharray = '3 3';

const fontStyle = {
  fontSize: '0.625em',
  fontFamily: 'maersk-text', 
  fontWeight: 400,
  letterSpacing: '0.07em', 
};

export const cartesianGridStyle = {
  stroke: axisStrokeColor,
  strokeDasharray: strokeDasharray
};

export const xAxisStyle: XAxisProps = {
  dy: 12,
  interval: 'preserveStartEnd',
  stroke: axisStrokeColor,
  strokeDasharray: strokeDasharray,
  ...fontStyle,
};

export const yAxisStyle = (label): YAxisProps => ({
  dx: -8,
  label: {
    value: label, 
    position: 'insideBottomLeft', 
    offset: 0, 
    dx: 3,
    dy: 27,
    fontSize: fontStyle.fontSize, 
    fill: axisStrokeColor,
    letterSpacing: fontStyle.letterSpacing, 
  },
  stroke: axisStrokeColor,
  strokeDasharray: strokeDasharray,
  ...fontStyle,
});

export const tooltipStyle = {
  cursorStyle: { 
    fill: '#B3BDC5'
  },
};

export const lineStyle = (color) => ({
  stroke: color,
  dot: false,
  strokeWidth: 3,
  isAnimationActive: false,
  activeDot: { 
    r: 4, 
    strokeWidth: 0
  },
});