import { useState, useEffect } from 'react';
import './styles.css';

export default function TimesheetApprovals() {
  const [timesheets, setTimesheets] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const sample = [
      { id: '1', employee: 'John Doe', week: 'Feb 5-11', hours: 40, status: 'PENDING' },
      { id: '2', employee: 'Jane Smith', week: 'Feb 5-11', hours: 38, status: 'PENDING' },
    ];
    setTimesheets(sample);
    setLoading(false);
  }, []);

  if (loading) return <div className="container"><div className="loading">Loading...</div></div>;

  return (
    <div className="container">
      <div className="header">
        <h1>Timesheet Approvals</h1>
        <p className="subtitle">{timesheets.length} pending approvals</p>
      </div>
      <div className="card">
        <h2>Pending Timesheets</h2>
        <div className="timesheet-list">
          {timesheets.map(ts => (
            <div key={ts.id} className="timesheet-item">
              <div>
                <h3>{ts.employee}</h3>
                <p>{ts.week} • {ts.hours} hours</p>
              </div>
              <div className="actions">
                <button className="btn-approve">Approve</button>
                <button className="btn-reject">Reject</button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
