"use client";

interface Props {
  enquiries: any[];
}

export default function RecentEnquiries({
  enquiries,
}: Props) {
  return (
    <div className="rounded-2xl border bg-white p-6 shadow-sm">

      <div className="mb-6">
        <h2 className="text-xl font-semibold">
          Recent Enquiries
        </h2>

        <p className="text-sm text-gray-500">
          Latest customer enquiries
        </p>
      </div>

      <div className="space-y-4">

        {enquiries.map((item) => (

          <div
            key={item._id}
            className="flex items-center justify-between border-b pb-4 last:border-none"
          >

            <div>

              <h3 className="font-semibold">
                {item.name}
              </h3>

              <p className="text-sm text-gray-500">
                {item.eventType}
              </p>

            </div>

            <div className="text-right">

              <span
                className={`rounded-full px-3 py-1 text-xs font-medium
                ${
                  item.status === "New"
                    ? "bg-blue-100 text-blue-700"
                    : item.status === "Contacted"
                    ? "bg-orange-100 text-orange-700"
                    : "bg-green-100 text-green-700"
                }`}
              >
                {item.status}
              </span>

              <p className="mt-2 text-xs text-gray-400">
                {new Date(
                  item.createdAt
                ).toLocaleDateString()}
              </p>

            </div>

          </div>

        ))}

      </div>

    </div>
  );
}