import Image from 'next/image';

const TableSix = () => {
  // Table data array
  const tableData = [
    {
      id: 1,
      user: {
        name: "Lindsey Curtis",
        role: "Web Designer",
        avatar: "/images/user/user-17.jpg"
      },
      project: "Agency Website",
      team: [
        "/images/user/user-22.jpg",
        "/images/user/user-23.jpg",
        "/images/user/user-24.jpg"
      ],
      status: {
        text: "Active",
        variant: "success"
      },
      budget: "3.9K"
    },
    {
      id: 2,
      user: {
        name: "Kaiya George",
        role: "Project Manager",
        avatar: "/images/user/user-18.jpg"
      },
      project: "Technology",
      team: [
        "/images/user/user-25.jpg",
        "/images/user/user-26.jpg"
      ],
      status: {
        text: "Pending",
        variant: "warning"
      },
      budget: "24.9K"
    },
    {
      id: 3,
      user: {
        name: "Zain Geidt",
        role: "Content Writer",
        avatar: "/images/user/user-19.jpg"
      },
      project: "Blog Writing",
      team: [
        "/images/user/user-27.jpg"
      ],
      status: {
        text: "Active",
        variant: "success"
      },
      budget: "12.7K"
    },
    {
      id: 4,
      user: {
        name: "Abram Schleifer",
        role: "Digital Marketer",
        avatar: "/images/user/user-20.jpg"
      },
      project: "Social Media",
      team: [
        "/images/user/user-28.jpg",
        "/images/user/user-29.jpg",
        "/images/user/user-30.jpg"
      ],
      status: {
        text: "Cancel",
        variant: "error"
      },
      budget: "2.8K"
    },
    {
      id: 5,
      user: {
        name: "Carla George",
        role: "Front-end Developer",
        avatar: "/images/user/user-21.jpg"
      },
      project: "Website",
      team: [
        "/images/user/user-31.jpg",
        "/images/user/user-32.jpg",
        "/images/user/user-33.jpg"
      ],
      status: {
        text: "Active",
        variant: "success"
      },
      budget: "4.5K"
    }
  ];

  // Status style variants
  const statusVariants = {
    success: "bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-500",
    warning: "bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-warning-400",
    error: "bg-error-50 text-error-700 dark:bg-error-500/15 dark:text-error-500"
  };

  return (
    <div className="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
      <div className="max-w-full overflow-x-auto">
        <table className="min-w-full">
          {/* Table Header */}
          <thead>
            <tr className="border-b border-gray-100 dark:border-gray-800">
              <th className="px-5 py-3 sm:px-6">
                <div className="flex items-center">
                  <p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
                    User
                  </p>
                </div>
              </th>
              <th className="px-5 py-3 sm:px-6">
                <div className="flex items-center">
                  <p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
                    Project Name
                  </p>
                </div>
              </th>
              <th className="px-5 py-3 sm:px-6">
                <div className="flex items-center">
                  <p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
                    Team
                  </p>
                </div>
              </th>
              <th className="px-5 py-3 sm:px-6">
                <div className="flex items-center">
                  <p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
                    Status
                  </p>
                </div>
              </th>
              <th className="px-5 py-3 sm:px-6">
                <div className="flex items-center">
                  <p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
                    Budget
                  </p>
                </div>
              </th>
            </tr>
          </thead>

          {/* Table Body */}
          <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
            {tableData.map((item) => (
              <tr key={item.id}>
                {/* User Column */}
                <td className="px-5 py-4 sm:px-6">
                  <div className="flex items-center">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 overflow-hidden rounded-full">
                        <Image
                          src={item.user.avatar}
                          alt={item.user.name}
                          width={40}
                          height={40}
                          className="object-cover"
                        />
                      </div>
                      <div>
                        <span className="block font-medium text-gray-800 text-theme-sm dark:text-white/90">
                          {item.user.name}
                        </span>
                        <span className="block text-gray-500 text-theme-xs dark:text-gray-400">
                          {item.user.role}
                        </span>
                      </div>
                    </div>
                  </div>
                </td>

                {/* Project Column */}
                <td className="px-5 py-4 sm:px-6">
                  <div className="flex items-center">
                    <p className="text-gray-500 text-theme-sm dark:text-gray-400">
                      {item.project}
                    </p>
                  </div>
                </td>

                {/* Team Column */}
                <td className="px-5 py-4 sm:px-6">
                  <div className="flex items-center">
                    <div className="flex -space-x-2">
                      {item.team.map((member, index) => (
                        <div
                          key={index}
                          className="w-6 h-6 overflow-hidden border-2 border-white rounded-full dark:border-gray-900"
                        >
                          <Image
                            src={member}
                            alt={`Team member ${index + 1}`}
                            width={24}
                            height={24}
                            className="object-cover"
                          />
                        </div>
                      ))}
                    </div>
                  </div>
                </td>

                {/* Status Column */}
                <td className="px-5 py-4 sm:px-6">
                  <div className="flex items-center">
                    <p
                      className={`rounded-full px-2 py-0.5 text-theme-xs font-medium ${statusVariants[item.status.variant]}`}
                    >
                      {item.status.text}
                    </p>
                  </div>
                </td>

                {/* Budget Column */}
                <td className="px-5 py-4 sm:px-6">
                  <div className="flex items-center">
                    <p className="text-gray-500 text-theme-sm dark:text-gray-400">
                      {item.budget}
                    </p>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default TableSix;