import type { TypographyVariant } from '@mui/material/styles';
import { useTheme } from '@mui/material/styles';

import { staticLineHeight } from '../constants';

export const useInputStyles = (variant: TypographyVariant, fontWeight: string | number) => {
  const theme = useTheme();

  const targetFont = theme.typography[variant];

  return {
    fontSize: parseFloat(targetFont.fontSize as string),
    lineHeight: staticLineHeight,
    letterSpacing: 0,
    fontWeight: fontWeight ?? targetFont.fontWeight,
  };
};

export const getInputStyleCssVariables = (
  fontSize: number,
  fontWeight: number | string,
  lineHeight: number,
  letterSpacing: number,
) => ({
  '--internal-font-size': `${fontSize}px`,
  '--internal-line-height': lineHeight,
  '--internal-letter-spacing': `${letterSpacing}px`,
  '--internal-font-weight': fontWeight,
});
