<template>
  <input class="trifle-input" type="text" :name="name" :placeholder="placeholder" :style="style">
</template>

<script>
export default {
  name: 'Input',
  props: {
    name: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
    size: {
      type: String,
      default: 'medium',
      validator(val) {
        return ['medium', 'large'].includes(val)
      },
    },
  },
  computed: {
    style() {
      return {
        '--size': this.size === 'medium' ? '32px' : '40px',
        '--font': this.size === 'medium' ? '14px' : '16px',
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../const/variable.scss';

.trifle-input {
  --size: 32px;
  --font: 14px;

  border: 1px solid palette(gray, base);
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.65);
  font-size: var(--font);
  height: var(--size);
  padding: 4px 11px;
}
</style>

