import { Input, View } from "@tarojs/components";
import React, { CSSProperties } from "react";
import styles from "./oui-search.module.scss";
import OuiImage from "../oui-image/oui-image";
import { Icons } from "@/components/assets/icons";

interface OuiSearchProps {
  height?: number;
  padding?: number;
  placeholder?: string;
  fontSize?: number;
  backgroundColor?: string;
  style?: CSSProperties;
}

function OuiSearch({
  height = 32,
  padding = 8,
  placeholder = "输入关键字搜索",
  fontSize = 12,
  backgroundColor = "#ffffff",
  style,
}: OuiSearchProps) {
  const componentStyle = (): CSSProperties => {
    return {
      height: `${height}px`,
      backgroundColor: backgroundColor,
    };
  };
  const textStyle = (): CSSProperties => {
    return {
      padding: `0 ${padding}px`,
      height: `${height}px`,
      fontSize: `${fontSize}px`,
    };
  };
  const buttonStyle = (): CSSProperties => {
    return {
      width: `${height}px`,
      height: `${height}px`,
    };
  };
  return (
    <View
      className={styles.component}
      style={{ ...componentStyle(), ...style }}
    >
      <Input
        type="text"
        className={styles.text}
        placeholder={placeholder}
        cursorColor="#141414"
        style={textStyle()}
      />
      <View className={styles.button} style={buttonStyle()}>
        <OuiImage
          origin="iconoir"
          color="transparent"
          src={Icons.SearchIcon}
          width={16}
          height={16}
        />
      </View>
    </View>
  );
}

export default OuiSearch;