import styled from 'styled-components';

export interface TypographyProps {
  color?: string;
  fontFamily?: string;
  fontSize?: string;
  fontStyle?: string;
  fontWeight?: string;
  lineHeight?: string;
  letterSpacing?: string;
  marginBottom?: string;
  marginTop?: string;
  textAlign?: string;
}

export const Typography = styled.span.attrs<{ className?: string }>(({ className }) => ({
  'data-component-name': 'Typography/Typography',
  className,
}))<TypographyProps>`
  color: ${({ color }) => color || 'var(--text-color-primary)'};
  font-family: ${({ fontFamily }) => fontFamily || 'var(--font-family-base)'};
  font-size: ${({ fontSize }) => fontSize || 'var(--font-size-base)'};
  font-style: ${({ fontStyle }) => fontStyle};
  font-weight: ${({ fontWeight }) => fontWeight || 'var(--font-weight-regular)'};
  line-height: ${({ lineHeight }) => lineHeight || 'var(--line-height-base)'};
  letter-spacing: ${({ letterSpacing }) => letterSpacing};
  margin-bottom: ${({ marginBottom }) => marginBottom};
  margin-top: ${({ marginTop }) => marginTop};
  text-align: ${({ textAlign }) => textAlign};
`;