import React from "react";
import { Input } from "baseui/input";

export default function Example() {
  return (
    <Input
      overrides={{
        Root: {
          style: (props) => {
            const {
              $disabled,
              $error,
              $isFocused,
              $theme: { colors, sizing },
            } = props;
            const border = $disabled
              ? colors.borderTransparent
              : $error
                ? colors.borderNegative
                : $isFocused
                  ? "darkseagreen"
                  : colors.borderOpaque;
            return {
              borderLeftColor: border,
              borderRightColor: border,
              borderTopColor: border,
              borderBottomColor: border,
              boxShadow: `0 0 ${sizing.scale100} ${
                $disabled
                  ? "transparent"
                  : $error
                    ? colors.shadowError
                    : $isFocused
                      ? "lightseagreen"
                      : "transparent"
              }`,
            };
          },
        },
      }}
      placeholder="Input with a custom InputContainer override"
    />
  );
}