# `PhiaUi.Components.CountdownTimer`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/calendar/countdown_timer.ex#L1)

Display-only countdown timer widget rendered in two variants.

Both variants are **zero-JS** — the parent LiveView drives the timer by
updating assigns (e.g. via `Process.send_after/3` + `handle_info/2`).

## Variants

| Variant      | Description                                                     |
|--------------|-----------------------------------------------------------------|
| `:circular`  | SVG arc progress ring with centered time + duration label       |
| `:flat`      | Rectangular card with large time pill, progress bar, and optional action buttons |

## Examples

    <%!-- Circular (default) --%>
    <.countdown_timer
      minutes={@minutes}
      seconds={@seconds}
      total_seconds={3600}
      label="60 min"
    />

    <%!-- Flat with action buttons --%>
    <.countdown_timer
      minutes={@minutes}
      seconds={@seconds}
      total_seconds={3600}
      variant={:flat}
      label="60 min"
      on_pause="pause_timer"
      on_stop="stop_timer"
    />

## LiveView integration

    def mount(_params, _session, socket) do
      total = 3600
      {:ok, assign(socket, minutes: 60, seconds: 0, total_seconds: total)}
    end

    def handle_info(:tick, %{assigns: %{minutes: 0, seconds: 0}} = socket) do
      {:noreply, socket}
    end

    def handle_info(:tick, socket) do
      remaining = socket.assigns.minutes * 60 + socket.assigns.seconds - 1
      Process.send_after(self(), :tick, 1_000)
      {:noreply, assign(socket,
        minutes: div(remaining, 60),
        seconds: rem(remaining, 60)
      )}
    end

# `countdown_timer`

Renders a countdown timer widget.

## Example

    <.countdown_timer minutes={31} seconds={47} total_seconds={3600} variant={:flat} label="60 min" />

## Attributes

* `minutes` (`:integer`) (required) - Current remaining minutes.
* `seconds` (`:integer`) (required) - Current remaining seconds (0–59).
* `total_seconds` (`:integer`) (required) - Total timer duration in seconds. Used to compute progress percentage.
* `variant` (`:atom`) - Display variant. `:circular` renders an SVG arc ring; `:flat` renders a card with a progress bar. Defaults to `:circular`. Must be one of `:circular`, or `:flat`.
* `label` (`:string`) - Optional duration label displayed below the time, e.g. `"60 min"`. Defaults to `nil`.
* `on_pause` (`:string`) - phx-click event name for the pause button (flat variant only). Defaults to `nil`.
* `on_stop` (`:string`) - phx-click event name for the stop button (flat variant only). Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes for the root element. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root `<div>`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*