import {
  Table,
  TableBody,
  TableCell,
  TableHeader,
  TableRow,
} from "@/src/components/admin/ui/table";
import Badge from "@/src/components/admin/ui/badge/Badge";
import Image from "next/image";
import { Bell, Clock } from "lucide-react";

// Define the TypeScript interface for the table rows
interface Product {
  id: number; // Unique identifier for each product
  name: string; // Product name
  variants: string; // Number of variants (e.g., "1 Variant", "2 Variants")
  category: string; // Category of the product
  price: string; // Price of the product (as a string with currency symbol)
  // status: string; // Status of the product
  image: string; // URL or path to the product image
  status: "Delivered" | "Pending" | "Canceled"; // Status of the product
}

// Define the table data using the interface
const notifyPropertyLogs = [
  {
    id: 1,
    name: "Rajesh Gupta",
    variants: "3 BHK",
    category: "Residential",
    price: "₹2.8 Cr",
    status: "Delivered",
    image: "/images/properties/bandra-3bhk.jpg",
    notifiedAt: "2025-04-12 10:30 AM",
    propertyId: 101,
  },
  {
    id: 2,
    name: "Priya Sharma",
    variants: "2 BHK",
    category: "Residential",
    price: "₹95 Lakh",
    status: "Opened",
    image: "/images/properties/hinjawadi-2bhk.jpg",
    notifiedAt: "2025-04-12 09:15 AM",
    propertyId: 102,
  },
  {
    id: 3,
    name: "Amit Patel",
    variants: "Office Space",
    category: "Commercial",
    price: "₹1.2 Cr",
    status: "Clicked",
    image: "/images/properties/satellite-office.jpg",
    notifiedAt: "2025-04-11 04:45 PM",
    propertyId: 103,
  },
  {
    id: 4,
    name: "Neha Verma",
    variants: "4 BHK Penthouse",
    category: "Residential",
    price: "₹6.5 Cr",
    status: "Pending",
    image: "/images/properties/koregaon-park-penthouse.jpg",
    notifiedAt: "2025-04-11 11:20 AM",
    propertyId: 104,
  },
  {
    id: 5,
    name: "Sanjay Mehta",
    variants: "Shop",
    category: "Commercial",
    price: "₹45 Lakh",
    status: "Delivered",
    image: "/images/properties/andheri-shop.jpg",
    notifiedAt: "2025-04-10 02:10 PM",
    propertyId: 105,
  },
  {
    id: 6,
    name: "Kavita Singh",
    variants: "1 BHK",
    category: "Residential",
    price: "₹52 Lakh",
    status: "Failed",
    image: "/images/properties/thane-1bhk.jpg",
    notifiedAt: "2025-04-10 08:00 AM",
    propertyId: 106,
  },
];

export default function RecentOrders() {
  return (
    <div className="overflow-hidden rounded-2xl border border-gray-200 bg-white px-4 pb-3 pt-4 dark:border-gray-800 dark:bg-white/[0.03] sm:px-6">
      <div className="flex flex-col gap-2 mb-4 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex items-center gap-3">

          <Bell className="w-5 h-5" />



          <h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
            Notify Property Logs
          </h3>
        </div>

        <div className="flex items-center gap-3">

          <button className="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-theme-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200">
            See all
          </button>
        </div>
      </div>
      <div className="max-w-full overflow-x-auto">
        <Table>
          {/* Table Header */}
          <TableHeader className="border-gray-100 dark:border-gray-800 border-y">
            <TableRow>
              <TableCell
                className="py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
              >
                Property
              </TableCell>
              <TableCell
                className="py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
              >
                Notify
              </TableCell>
              <TableCell
                className="py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
              >
                Received
              </TableCell>
              <TableCell
                className="py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"
              >
                Action Taken
              </TableCell>
            </TableRow>
          </TableHeader>

          {/* Table Body */}

          <TableBody className="divide-y divide-gray-100 dark:divide-gray-800">
            {notifyPropertyLogs.map((product) => (
              <TableRow key={product.id} className="">
                <TableCell className="py-3">
                  <div className="flex items-center gap-3">

                    <div>
                      <p className="font-medium text-gray-800 text-theme-sm dark:text-white/90">
                        {product.name}
                      </p>
                      <span className="text-gray-500 text-theme-xs dark:text-gray-400">
                        {product.variants}
                      </span>
                    </div>
                  </div>
                </TableCell>
                <TableCell className="py-3 text-gray-500 text-theme-sm dark:text-gray-400">
                  {product.price}
                </TableCell>
                <TableCell className="py-3 text-gray-500 text-theme-sm dark:text-gray-400">
                  {product.category}
                </TableCell>
                <TableCell className="py-3 text-gray-500 text-theme-sm dark:text-gray-400">
                  <Badge
                    size="sm"
                    color={
                      product.status === "Delivered"
                        ? "success"
                        : product.status === "Pending"
                          ? "warning"
                          : "error"
                    }
                  >
                    {product.status}
                  </Badge>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}