---
import { actions } from 'astro:actions';

interface Props {
  repo: string;
  inputId: string;
  placeholder: string;
}

const { repo, inputId, placeholder } = Astro.props;
---

<form class="share-uri" method="POST" action={actions.shareAtmosphereContent}>
  <label class="visually-hidden" for={inputId}>Share AT URI</label>
  <input type="hidden" name="sourceRepo" value={repo} />
  <input
    id={inputId}
    class="share-uri__input"
    type="url"
    name="candidateUri"
    inputmode="url"
    placeholder={placeholder}
    autocomplete="off"
    required
  />
  <button class="share-uri__button" type="submit">Share</button>
</form>

<style>
  .share-uri {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-sm);
    padding-top: var(--space-xs);
  }

  .share-uri__input {
    min-width: 0;
    min-height: 40px;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--card);
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: var(--text-sm);
  }

  .share-uri__input::placeholder {
    color: var(--foreground-muted);
  }

  .share-uri__button {
    min-width: 4rem;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--primary);
    color: var(--primary-foreground);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .share-uri__button:hover {
    background: var(--primary-hover);
  }

  .share-uri__button:focus-visible,
  .share-uri__input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  .share-uri__button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  .share-uri__button:disabled:hover {
    background: var(--primary);
  }

  @media (max-width: 520px) {
    .share-uri {
      grid-template-columns: minmax(0, 1fr);
      justify-content: stretch;
    }

    .share-uri__button {
      width: 100%;
    }
  }
</style>