import styled from 'styled-components';

import { TextColor } from '../Paragraph/types.d';
import { ThemeObject } from '../Theme';

const getColor = (theme: ThemeObject, color: TextColor) => (color === 'main' ? theme.text.main : theme.text.secondary);

export const StyledParagraph = styled.p.attrs((props: { $theme: ThemeObject; color: TextColor; $hover: boolean }) => ({
  $theme: props.$theme,
  color: props.color,
  $hover: props.$hover,
}))`
  color: ${(props) => getColor(props.$theme, props.color)};
  fill: ${(props) => getColor(props.$theme, props.color)};
  stroke: ${(props) => getColor(props.$theme, props.color)};
  :hover {
    color: ${(props) => (props.$hover ? props.$theme.pallet.primaryColor : undefined)};
  }
  transition: all 0.45s;
`;

export const StyledMainText = styled.p.attrs((props: { $theme: ThemeObject; $color: keyof ThemeObject['text'] }) => ({
  $theme: props.$theme,
  $color: props.$color,
}))`
  color: ${(props) => props.$theme.text[props.$color]};
  fill: ${(props) => props.$theme.text[props.$color]};
  stroke: ${(props) => props.$theme.text[props.$color]};
  transition: all 0.25s;
`;
