import React, { FC, ComponentProps } from 'react'
import { Typography, TypographyProps } from 'antd'
import styled from 'styled-components'

type AdditionalParagraphProps = ComponentProps<TypographyProps['Paragraph']> & {
	level?: 1 | 2;
	primary?: boolean;
}

const StyledParagraph = styled(Typography.Paragraph)<{$primary?:boolean}>`
  ${({ $primary, theme }) => $primary ? `color: ${theme.brandPrimary}` : ''}
`

const StyledParagraph2 = styled(Typography.Paragraph)<{
	$primary?:boolean
}>`
  font-size: 12px;
  ${({ $primary, theme }) => $primary ? `color: ${theme.brandPrimary}` : ''}
`
export const Paragraph: FC<AdditionalParagraphProps> = ({ level = 1, primary, ...props }) => {
	if (level === 2) {
		return <StyledParagraph2 {...props} $primary={primary} />
	}
	return <StyledParagraph {...props} $primary={primary} />
}