<script lang="ts">
    import { RiLink, RiLock2Line, RiPlaneLine, RiStackLine } from "svelte-remixicon";

    let { value = $bindable(0) } = $props();
</script>

<ul class="grid">
  <li>
    <label>
    <input type="radio" name="privacy" value={0} bind:group={value} />
    <RiPlaneLine />
    Public
    <small class="faint">your followers and public timeline</small>
  </label>
</li>
  <li>
    <label>
    <input type="radio" name="privacy" value=1 bind:group={value} />
    <RiLink />
    Unlisted
    <small class="faint">your followers, hide from public timeline</small>
  </label>
</li>
  <li>
    <label>
    <input type="radio" name="privacy" value=2 bind:group={value} />
    <RiStackLine />
    Friends
    <small class="faint">mutual followers only</small>
  </label>
</li>
  <li>
    <label>
    <input type="radio" name="privacy" value=3 bind:group={value} />
    <RiLock2Line />
    Only you
    <small class="faint">nobody else</small>
  </label>
</li>
</ul>

<style>

@media (max-width: 1099px) {
  ul.grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 699px) {
  ul.grid {
    grid-template-columns: 1fr 1fr;
  } 
}

li:has(:checked) {
  border-color: var(--accent);
}
</style>
