### `formatDuration` [#formatduration]

Converts numeric duration values (in seconds) into time strings in the format "M:SS" or "H:MM:SS". Handles database string values, null values, and invalid inputs gracefully.

```tsx
import { formatDuration } from "@tilt-legal/cubitt-components/utilities/formatters";

formatDuration(154); // "2:34"
formatDuration(3665); // "1:01:05"
formatDuration("154"); // "2:34" (handles string from database)
formatDuration(null); // "-"
```

| Input Type | Example | Output   |
| ---------- | ------- | -------- |
| `number`   | `154`   | `"2:34"` |
| `string`   | `"154"` | `"2:34"` |
| `null`     | `null`  | `"-"`    |

### Examples [#examples]

#### Media player [#media-player]

```tsx
<div className="flex items-center gap-2">
  <span>{formatDuration(currentTime)}</span>
  <Slider value={currentTime} max={duration} />
  <span>{formatDuration(duration)}</span>
</div>
// Displays: "1:23 ──────●──── 3:45"
```

#### Data table [#data-table]

```tsx
<DataTable
  columns={[
    {
      accessorKey: 'duration',
      header: 'Duration',
      cell: ({ row }) => formatDuration(row.original.duration),
    },
  ]}
/>
```

#### Video cards [#video-cards]

```tsx
<Card>
  <CardContent>
    <video src={video.url} />
    <Badge variant="secondary" className="absolute bottom-2 right-2">
      {formatDuration(video.duration)}
    </Badge>
  </CardContent>
</Card>
```

***

### `formatETA` [#formateta]

Formats estimated time remaining in a compact format like "2m 30s" or "1h 5m". Ideal for upload progress, download timers, and countdown displays.

```tsx
import { formatETA } from "@tilt-legal/cubitt-components/utilities/formatters";

formatETA(30);   // "30s"
formatETA(90);   // "1m 30s"
formatETA(3600); // "1h"
formatETA(3900); // "1h 5m"
```

| Input  | Output     |
| ------ | ---------- |
| `30`   | `"30s"`    |
| `60`   | `"1m"`     |
| `90`   | `"1m 30s"` |
| `3600` | `"1h"`     |
| `3900` | `"1h 5m"`  |

#### Upload progress [#upload-progress]

```tsx
<div>
  Uploading... {progress}%
  <span>{formatETA(remainingSeconds)} remaining</span>
</div>
// Output: "Uploading... 45% 2m 15s remaining"
```