import { SpecifyBorderValue } from '@specifyapp/specify-design-token-format';
import { colorToTailwind } from './color.js';
import { dimensionToTailwind } from './dimension.js';
import { radiiToTailwind } from './radii.js';

export function borderToTailwind(value: SpecifyBorderValue) {
  const borderColor = colorToTailwind(value.color);
  const borderWidth = dimensionToTailwind(value.width);
  const radii = !!value.rectangleCornerRadii
    ? radiiToTailwind(value.rectangleCornerRadii)
    : undefined;

  const tokens = [{ value: borderWidth, type: 'borderWidth' }];

  if (!!borderColor) tokens.push({ value: borderColor, type: 'colors' });
  if (!!radii) tokens.push({ value: radii, type: 'borderRadius' });

  return tokens;
}