export function ConfirmButton({ onConfirm, children }) {
  const [armed, setArmed] = useState(false);
  const m = useMessages(); // built-in English + Arabic strings
  return (
    <Button variant="danger"
      onPress={() => armed ? onConfirm() : setArmed(true)}
      onBlur={() => setArmed(false)}>
      {armed ? m.pressAgain : children}
    </Button>
  );
}

export function Rating({ label, max = 5, onChange }) {
  return (
    <RadioGroup orientation="horizontal" onChange={onChange}>
      <Label>{label}</Label>
      {range(1, max).map((n) => (
        <Radio key={n} value={String(n)} aria-label={m.of(n, max)}
          className="tv-rating-dot" />
      ))}
    </RadioGroup>
  );
}