import React, { ReactNode } from 'react'
import styled from 'styled-components'

export type ButtonProps = {
  onClick?: () => void
  children?: React.ReactNode
  icon?: ReactNode;
  type?: "button" | "reset" | "submit";
  css?: string;
  disabled?:boolean;
};

export const Button = ({ css,children,onClick,icon,disabled,type }: ButtonProps):JSX.Element => {
  return (
    <Container css={css}>
      <StyledButton type={type} disabled={disabled} onClick={onClick}>
        {icon}
        {children}
      </StyledButton>
    </Container>
  )
}

const Container = styled.div<{ css?: string }>`
  box-sizing:border-box;
  button {
    padding: 10px 30px 10px 30px;
  }
  ${({ css }) => css}
`
const StyledButton = styled.button`
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  appearance: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  border-radius: 4px;
  font-weight: 600;
  line-height: 1;
  font-size: 1rem;
  user-select: none;
  cursor: pointer;
  border: 1px solid transparent;
  box-shadow: rgba(0, 0, 0, 0.30) 0px 5px 15px;
  background-color: #228be6;
  color: #ffffff;
  box-sizing: border-box;
  -webkit-box-flex: 0;
  flex-grow: 0;
  align-items:center;
  gap:10px;

  &:disabled {
    background-color: rgba(255, 255, 255, 0.3);
    pointer-events: none;
  }

  &:active {
    border: 1px solid #05121e;
  }

  &:hover {
    opacity: 0.8;
    filter: brightness(1.10);
  }
`

