Input Button

import styled, { css } from "styled-components";

export default function InputButton({
  icon,
  text,
  children,
  onClick,
  style,
  direction = "row",
  isDisable,
  gap = "8px",
  design = "solid",
  fontColor = "#fff",
  fontSize = "16px",
  fontWeight,
  fontFamily,
  backgroundColor = "#465750",
  borderWidth = "1px",
  borderRadius = "8px",
  borderColor,
  paddingHorizontal = "12px",
  paddingVertical = "8px",
  margin,
  width,
  height,
  display = "inline-flex",
  shadow,
  className,
}) {
  return (
    <Styled
      className={className}
      style={style}
      onClick={(e) => {
        if (onClick && !isDisable) {
          onClick(e);
        }
      }}
      $isDisable={isDisable}
      $margin={margin}
      $width={width}
      $height={height}
      $design={design}
      $borderWidth={borderWidth}
      $borderColor={borderColor}
      $borderRadius={borderRadius}
      $fontSize={fontSize}
      $fontWeight={fontWeight}
      $fontFamily={fontFamily}
      $fontColor={fontColor}
      $display={display}
      $direction={direction}
      $shadow={shadow}
      $icon={icon}
      $text={text}
      $backgroundColor={backgroundColor}
      $paddingVertical={paddingVertical}
      $paddingHorizontal={paddingHorizontal}
      $gap={gap}
    >
      {icon && <span className={"icon"}>{icon}</span>}
      {text && <span className={"txt"}>{text}</span>}
      {children}
    </Styled>
  );
}

const Styled = styled.button`
  cursor: pointer;
  justify-content: center;
  align-items: center;
  display: ${({ $display }) => $display};
  flex-direction: ${({ $direction }) => $direction};
  width: ${({ $width }) => $width};
  height: ${({ $height }) => $height};
  margin: ${({ $margin }) => $margin};
  border-radius: ${({ $borderRadius }) => $borderRadius};
  padding: ${({ $paddingHorizontal, $paddingVertical }) =>
    $paddingHorizontal + " " + $paddingVertical};
  box-shadow: ${({ $shadow }) => $shadow};
  opacity: ${({ $isDisable }) => ($isDisable ? "0.5" : "1")};
  border-width: ${({ $borderWidth }) => $borderWidth};
  border-style: solid;
  .txt {
    font-size: ${({ $fontSize }) => $fontSize};
    font-weight: ${({ $fontWeight }) => $fontWeight};
    font-family: ${({ $fontFamily }) => $fontFamily};
  }
  ${({ $design }) => designStyles($design)};
  .icon {
    margin-right: ${({ $text, $gap, $direction }) =>
      $direction == "row" && $text ? $gap : null};
    margin-left: ${({ $text, $gap, $direction }) =>
      $direction == "row-reverse" && $text ? $gap : null};
    margin-bottom: ${({ $text, $gap, $direction }) =>
      $direction == "column" && $text ? $gap : null};
    margin-top: ${({ $text, $gap, $direction }) =>
      $direction == "column-reverse" && $text ? $gap : null};
  }
  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &:active {
    opacity: 0.8;
  }
`;

const designStyles = (design) =>
  ({
    solid: css`
      background-color: ${({ $backgroundColor }) => $backgroundColor};
      border-color: ${({ $backgroundColor }) => $backgroundColor};
      .txt {
        color: ${({ $fontColor }) => $fontColor};
      }
    `,
    none: css`
      background-color: transparent;
      border-color: transparent;
      .txt {
        color: ${({ $fontColor }) => $fontColor};
      }
    `,
    outline: css`
      background-color: transparent;
      border-color: ${({ $borderColor, $fontColor }) =>
        $borderColor || $fontColor};
      .txt {
        color: ${({ $fontColor }) => $fontColor};
      }
    `,
  }[design]);

import IconBug from "../../element/icon/IconBug";
import InputButton from "../../example/InputButton";

export default function TestView() {
  return (
    <div className="test-view">
      <InputButton
        icon={<IconBug />}
        text={"This is button"}
        onClick={() => {
          console.log("clicked!");
        }}
      />
    </div>
  );
}