/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import {TextareaHTMLAttributes} from 'react';
import * as styled from 'styled-components';

import {theme, paddings} from 'components/shared/theme';
import {ConfirmButton} from 'components/buttons';

const formInputWidth = 350;
const {colors, spacing, primaryBorderRadius, fontSizeS} = theme;

/* Stylelint-disable property-no-vendor-prefix */
export const TextareaContainer = styled.default.div<{width: number | string}>`
  position: relative;
  width: ${({width}) => (width && isNaN(+width) ? width : (width || formInputWidth) + 'px')};
  display: flex;
  flex-direction: column;
`;

export const Textarea = styled.default.textarea<TextareaHTMLAttributes<HTMLTextAreaElement> & {error?: boolean}>`
  width: 100%;
  padding: ${paddings.medium};
  color: ${({color}) => color};
  background-color: ${colors.white};
  border-color: ${({error}) => (error ? colors.lightRed : 'transparent')};
  border-width: 1px;
  border-style: solid;
  border-radius: ${primaryBorderRadius};
  outline: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

  ~${ConfirmButton} {
    margin: 1rem 0;
  }
`;

export const HelperText = styled.default.p<{error?: boolean}>`
  color: ${({error}) => (error ? colors.lightRed : colors.gray600)};
  font-weight: 400;
  font-size: ${fontSizeS};
  margin-top: ${spacing.xxSmall};
`;
