import Link from "next/link";
import { RGPDRequest } from "../../../../app/config/rgpd.types";
import RGPDStatusBadge from "./RGPDStatusBadge";
import { DateUtils } from "../../../../app/utils/date";

interface Props {
    requests: RGPDRequest[];
}

export default function RGPDTable({ requests }: Props) {
    return (
        <div className="bg-white rounded-2xl shadow overflow-hidden">

            <table className="w-full text-sm">

                <thead
                    className="
          bg-[#f4f8f6]
          text-[#2f5d4b]
        "
                >
                    <tr>
                        <th className="p-3 text-left">
                            Usager
                        </th>

                        <th className="p-3 text-left">
                            Type
                        </th>

                        <th className="p-3 text-left">
                            Statut
                        </th>

                        <th className="p-3 text-left">
                            Réception
                        </th>

                        <th className="p-3 text-left">
                            Échéance
                        </th>

                        <th className="p-3 text-center">
                            Actions
                        </th>
                    </tr>
                </thead>

                <tbody>

                    {requests.map((item) => (
                        <tr
                            key={item.id}
                            className="
                hover:bg-[#f7faf8]
                transition
              "
                        >

                            <td className="p-3">
                                {item.usager_nom} {item.usager_prenom}
                            </td>

                            <td className="p-3">
                                {item.type}
                            </td>

                            <td className="p-3">
                                <RGPDStatusBadge
                                    status={item.statut}
                                />
                            </td>

                            <td className="p-3">
                                {DateUtils.short(item.date_reception)}
                            </td>

                            <td className="p-3">
                                {DateUtils.short(item.date_limite)}
                            </td>

                            <td className="p-3 text-center">

                                <Link
                                    href={`/admin/rgpd/${item.id}`}
                                    className="
    inline-flex items-center justify-center
    px-1 py-1
    rounded-lg
    text-white
    bg-gradient-to-r from-[#2f7d5f] to-[#3f9b74]
    shadow-sm
    hover:shadow-md
    hover:brightness-105
    active:scale-[0.98]
    transition-all duration-150
    focus:outline-none focus:ring-2 focus:ring-[#2f7d5f]/40
  "
                                >
                                    Voir
                                </Link>

                                <Link
                                    href={`/admin/rgpd/${item.id}/edit`}
                                    className="
    inline-flex items-center justify-center
    px-1 py-1
    rounded-lg
    text-[#2f5d4b]
    bg-[#f4f8f6]
    border border-[#dce8e2]
    hover:bg-[#e8f3ef]
    hover:border-[#bcd7c8]
    active:scale-[0.98]
    transition-all duration-150
    focus:outline-none focus:ring-2 focus:ring-[#2f7d5f]/30
  "
                                >
                                    Modifier
                                </Link>

                            </td>

                        </tr>
                    ))}

                </tbody>

            </table>

        </div>
    );
}