import React, { ReactNode } from 'react';
import styled from 'styled-components';
import { Text, StyledTextProps } from './Text';
import type { TextAppearance } from './Text';
import { linkStyle } from './styles';

const Paragraph = styled(Text)<StyledTextProps>(({ theme }) => {
  return { a: linkStyle(theme) };
});

export const P = ({
  appearance,
  variant,
  children,
}: TextAppearance & { children: ReactNode; variant?: 'body1' | 'body2' }) => {
  return (
    <Paragraph variant={variant ?? 'body1'} tag="p" appearance={appearance}>
      {children}
    </Paragraph>
  );
};