import { Replay } from "../../types/replay";
import TableHeader from "./ReplayHeader";
import ReplayRow  from "./ReplayRow";

interface ReplayTableProps {
    replays: Replay[];
    onView: (uuid: string) => void;
    onDelete: (uuid: string) => void;
}

const ReplayTable: React.FC<ReplayTableProps> = ({ replays, onView, onDelete }) => {
    return (
        <table className="min-w-full bg-white">
            <thead className="bg-gray-200 text-gray-700">
                <tr>
                    <TableHeader>NAME</TableHeader>
                    <TableHeader>UUID</TableHeader>
                    <TableHeader>CREATED BY </TableHeader>
                    <TableHeader>TIME CREATED</TableHeader>
                    <TableHeader>ACTIONS</TableHeader>
                </tr>
            </thead>
            <tbody>
                {replays.map((replay) => (
                    <ReplayRow
                        key={replay.uuid}
                        replay={replay}
                        onView={onView}
                        onDelete={onDelete}
                    />
                ))}
            </tbody>
        </table>
    );
};

export default ReplayTable;