import { useEffect, useState } from 'react';
import { Link, useOutletContext } from 'react-router-dom';
import { api } from '../api/client';
import Header from '../components/Layout/Header';
import SignalCard from '../components/SignalCard';

export default function RecentlyClosedPage() {
  const { user, setMobileOpen } = useOutletContext();
  const [signals, setSignals] = useState([]);

  useEffect(() => {
    api.get('/signals/recently-closed').then(({ data }) => setSignals(data.signals));
  }, []);

  return (
    <div>
      <Header title="سیگنال‌های بسته شده جدید" user={user} onMenuClick={() => setMobileOpen?.(true)} />

      <div className="card bg-accent/10 border-accent/30 mb-6 text-sm text-gray-300">
        سیگنال‌هایی که در ۲۴ ساعت گذشته بسته شده‌اند در اینجا نمایش داده می‌شوند و سپس به آرشیو منتقل می‌شوند.
      </div>

      <div className="space-y-4 mb-6">
        {signals.map((s) => (
          <SignalCard key={s.id} signal={s} showResult />
        ))}
      </div>

      <Link to="/signals/history" className="btn-outline inline-block text-center w-full sm:w-auto">
        مشاهده همه سیگنال‌های بسته شده
      </Link>
    </div>
  );
}
