import styled from 'styled-components';

import { ThemeObject } from '../Theme';

export const StyledSecondaryIcon = styled.div.attrs((props: { $theme: ThemeObject; $selected?: boolean }) => ({
  $theme: props.$theme,
  $selected: props.$selected,
}))`
  color: ${(props) => (props.$selected ? props.$theme?.pallet.primaryColor : props.$theme?.text.secondary)};
`;

export const StyledDivCounter = styled.div.attrs((props: { $theme: ThemeObject }) => ({
  $theme: props.$theme,
}))`
  color: ${(props) => props.$theme.text.secondary};
  fill: ${(props) => props.$theme.text.secondary};
  stroke: ${(props) => props.$theme.text.secondary};
`;

export const StyledIconButton = styled.div.attrs((props: { $theme: ThemeObject }) => ({
  $theme: props.$theme,
}))`
  color: ${(props) => props.$theme.text.main};
  fill: ${(props) => props.$theme.text.main};
  stroke: ${(props) => props.$theme.text.main};
  transition: all 0.25s;
  :hover {
    color: ${(props) => props.$theme.text.secondary};
    fill: ${(props) => props.$theme.text.secondary};
    stroke: ${(props) => props.$theme.text.secondary};
  }
`;

export const StyledInput = styled.input.attrs((props: { $theme: ThemeObject }) => ({
  $theme: props.$theme,
}))`
  color: ${(props) => props.$theme.text.main};
  ::placeholder {
    color: ${(props) => props.$theme.text.secondary};
    fill: ${(props) => props.$theme.text.secondary};
    stroke: ${(props) => props.$theme.text.secondary};
  }
  ::-webkit-input-placeholder {
    color: ${(props) => props.$theme.text.secondary};
    fill: ${(props) => props.$theme.text.secondary};
    stroke: ${(props) => props.$theme.text.secondary};
  }
  ::-ms-input-placeholder {
    color: ${(props) => props.$theme.text.secondary};
    fill: ${(props) => props.$theme.text.secondary};
    stroke: ${(props) => props.$theme.text.secondary};
  }
  transition: all 0.25s;
`;

export const StyledLightBackgroundWrapper = styled.div.attrs((props: { $theme: ThemeObject }) => ({
  $theme: props.$theme,
}))`
  background: ${(props) => props.$theme.background.light};
  transition: all 0.35s;
`;

export { StyledParagraph, StyledMainText } from './styled-paragraph';
