import styled from 'styled-components';
import { TextArea } from '@bjsdistribution/dms-component-library';
import React from 'react';
import { Select } from 'antd';

// Shared styles and components
export const Wrapper = styled.div`
  display: flex;
  gap: 15px;
`;

export const StyledTextArea = styled(TextArea)`
  display: flex;
  padding: 12px;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  border-radius: 10px;
  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);
  background: var(--Flowkit-White, #fff);
  resize: none;
  height: 35%;
`;

export const SplitContainer = styled.div`
  /* width: 95%; */
  min-width: 25vw;
  display: flex;
  flex-direction: column;
  gap: 10px;
`;

export const StyledAntSelect = styled(Select)`
  .ant-select-selector {
    /* width: 22vw; */
    border-radius: 22px;
  }
`;

export const Label = styled.label`
  color: #6a7378;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 500;
`;

export const DatePickerWrap = styled.div`
  position: relative;
  border-radius: 66px;
  border: 1px solid #e0e2e7;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);

  input[type='text'] {
    border-radius: 20px;
    background: #fff;
    border: none;
    color: #6a7378;
    font-size: 14px;
    font-weight: 400;
    padding: 10px 0;
    padding-left: 33px;
    min-width: 18vw;

    &:focus-visible {
      outline: none;
    }
  }

  svg {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
`;

export const ContentContainer = styled.div`
  display: flex;
  padding: 12px 12px;
  margin: 5px 14px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 15px;
  background: #f8fafc;
  border-radius: 15px;
`;

export const Row = styled.div`
  display: flex;
  flex-direction: column;
  gap: 10px;
`;

export const DoubleDropdownContainer = styled.div`
  display: flex;
  gap: 10px;
  width: 100%;
`;

// FormRow component
interface FormRowProps {
  label: string;
  children: React.ReactNode;
  required?: boolean;
}

export const FormRow: React.FC<FormRowProps> = ({
  label,
  children,
  required = false,
}) => (
  <Row>
    <Label>
      {label}
      {required && <span style={{ color: 'red', fontSize: '20px' }}> * </span>}
    </Label>
    {children}
  </Row>
);
