---
const { inputName, defaultTextContent, height, placeholder, className, defaultStyles = true } = Astro.props;

interface Props {
  inputName: string;
  defaultTextContent?: string;
  height: string;
  placeholder?: string;
  className?: string;
  defaultStyles?: boolean;
}
---

<input
  style={`height: ${height}`}
  id={inputName + "-input"}
  placeholder={placeholder || ""}
  value={defaultTextContent || ""}
  type="text"
  class={className}
/>

{defaultStyles && <style>
    input {
      font-size: 16px;
      width: 100%;
      border: 2px solid var(--background-highlight);
      border-radius: 10px;
      background-color: var(--accent-color);
      color: var(--text-color);
      transition: 0.1s ease-in-out;
    }
    input::placeholder {
      color: var(--text-color);
    }
    input:focus {
      outline: none;
      border: 2px solid var(--text-color);
    }
  </style>
}