import React, { useState, useEffect } from "react";
import { Table, Button } from "react-bootstrap";
import { FaFilter } from "react-icons/fa";

const Regform = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      const dummyData = [
        {
          name: "kk",
          rollNumber: "101",
          date: "2025-05-19",
          email: "kab@dekatc.com",
        },
        {
          name: "b",
          rollNumber: "1",
          date: "2025-05-24",
          email: "kab@gmail.com",
        },
      ];
      setTimeout(() => {
        setData(dummyData);
        setLoading(false);
      }, 500);
    };

    fetchData();
  }, []);

  return (
    <div className="container mt-5">
      <h3 className="mb-4">Registration Records</h3>

      {loading ? (
        <div className="text-center my-4">Loading...</div>
      ) : (
        <>
          {data.length === 0 ? (
            <div className="text-center my-4">No data available</div>
          ) : (
            <Table striped bordered hover responsive>
              <thead className="table-light">
                <tr>
                  <th>
                    <input type="checkbox" disabled />
                  </th>
                  <th>
                    Name <FaFilter className="ms-1" />
                  </th>
                  <th>
                    Roll Number <FaFilter className="ms-1" />
                  </th>
                  <th>
                    Date Field <FaFilter className="ms-1" />
                  </th>
                  <th>Email Field</th>
                </tr>
              </thead>
              <tbody>
                {data.map((entry, index) => (
                  <tr key={index}>
                    <td>
                      <input type="checkbox" />
                    </td>
                    <td>{entry.name}</td>
                    <td>{entry.rollNumber}</td>
                    <td>{entry.date}</td>
                    <td>{entry.email}</td>
                  </tr>
                ))}
              </tbody>
            </Table>
          )}
        </>
      )}

      <Button variant="outline-secondary" className="mt-3">
        Manage Columns
      </Button>
    </div>
  );
};

export default Regform;
