ردیفی که با کشیدن به کنار، کنش‌های پنهانش باز می‌شن؛ کشیدنِ کامل خودِ کنش رو اجرا می‌کنه.

"use client";

import { useEffect, useRef, useState } from "react";
import SwipeRow, { type SwipeAction } from "@/components/farsify/swipe-row";

const actions: SwipeAction[] = [
  { id: "delete", label: "حذف" },
  { id: "archive", label: "بایگانی", dismiss: true },
];

/** چند میلی‌ثانیه بعد ردیف برگردد. */
const RETURN_MS = 3000;

export function TaskList() {
  const [items, setItems] = useState(["بازبینی طرح", "پاسخ به ایمیل‌ها"]);
  const timers = useRef<ReturnType<typeof setTimeout>[]>([]);
  useEffect(() => () => timers.current.forEach(clearTimeout), []);

  const remove = (title: string, index: number) => {
    setItems((current) => current.filter((row) => row !== title));
    timers.current.push(
      setTimeout(() => {
        setItems((current) => {
          const next = [...current];
          next.splice(Math.min(index, next.length), 0, title);
          return next;
        });
      }, RETURN_MS),
    );
  };

  return (
    <div className="flex flex-col gap-2">
      {items.map((title, index) => (
        <SwipeRow
          key={title}
          label={title}
          actions={actions}
          onCommit={() => remove(title, index)}
        >
          <span>{title}</span>
        </SwipeRow>
      ))}
    </div>
  );
}