Simple File Input

---
/**
 * SimpleFileInput — A minimalist file upload button that masks the native browser input.
 * 
 * @param {string} label - The text displayed on the button. Default is "Choose File".
 * @param {string} id - HTML ID for the file input.
 * @param {string} name - HTML name binding.
 * @param {string} accept - Allowed file formats.
 */
interface Props {
  label?: string;
  id: string;
  name?: string;
  accept?: string;
}

const { label = "Choose File", id, name, accept } = Astro.props;
---

<label class="file-btn" for={id}>
  <input type="file" {id} {name} {accept} class="file-btn__input" />
  <span class="file-btn__label">{label}</span>
</label>

<style>
  .file-btn { 
    position: relative; 
    overflow: hidden; 
    display: inline-block; 
    cursor: pointer; 
  }
  
  .file-btn__input { 
    position: absolute; 
    left: 0; top: 0; 
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer; 
    font-size: 0;
  }
  
  .file-btn__label { 
    background: var(--c-primary, #6366f1); 
    color: #fff; 
    padding: 0.8rem 1.6rem; 
    border-radius: var(--r-md, 10px); 
    font-weight: 700; 
    display: inline-block; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
    font-size: 0.95rem;
  }
  
  .file-btn:hover .file-btn__label { 
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
  }
  
  .file-btn:active .file-btn__label {
    transform: translateY(0);
  }
</style>