import styled, { css } from "styled-components";
import { Text14_500, Text18 } from "./Typography";

type ButtonProps = {
  size?: "small" | "large";
  variant?: "green" | "white";
};

const VARIANTS = {
  green: { bg: "#16A34A", text: "#FFFFFF" },
  white: { bg: "#FFFFFF", text: "#1D2023" },
};

export const Button = styled.button<ButtonProps>`
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  opacity: 1;
  transition: background 0.3s ease, transform 0.2s ease;

  ${(props) => {
    const variant = VARIANTS[props.variant || "green"];
    return css`
      background: ${variant.bg};
      color: ${variant.text};
    `;
  }}

  &:hover {
    transform: translateY(-2px);
    filter: brightness(0.95);
  }
  &:active {
    transform: scale(0.98);
  }

  ${(props) =>
    props.size === "small" &&
    css`
      padding:0px 24px;
      padding-top: 3px;
      height:40px;
      @media (max-width: 768px) {
        height:32px;
        padding-top: 1px;
      }
    `}

  ${(props) =>
    props.size === "large" &&
    css`
      padding: 16px 32px;
      height:56px;
      @media (max-width: 768px) {
        height:48px;
      }
    `}
`;
