import React from 'react'
import styled from 'styled-components'

const Button = styled.button<{ primary?: boolean }>`
  ${(props) => (props.primary ? 'background-color: blue' : 'background-color: red')};
  color: white !important;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
`

const ErrorButton = styled.button`
  background-color: red;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
`
const LinkButton = styled.button`
  background-color: transparent;
  color: blue;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
`
const Input = styled.input.attrs<{ defaultValue: number }>((props) => {
  return {
    type: 'number',
    defaultValue: props.defaultValue,
  }
})`
  width: 100px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px;
  text-align: center;
`

export default function StyledComponents() {
  return (
    <div className="flex flex-row gap-2">
      <Button primary>Click me</Button>
      <Button>Click me</Button>
      <ErrorButton>Click me</ErrorButton>
      <LinkButton>Click me</LinkButton>
      <Input defaultValue={1} />
    </div>
  )
}