import Image from 'next/image';

const TableOne = () => {
  // Table data
  const tableData = [
    {
      id: 1,
      token: "1",
      name: "John Doe",
      status: {
        text: "Done",
        variant: "success",
        color: "text-success-600",
        bg: "bg-success-50",
        dark: {
          color: "dark:text-success-500",
          bg: "dark:bg-success-500/15"
        }
      }
    },
    {
      id: 2,
      token: "1",
      name: "John Doe",
      status: {
        text: "In-Queue",
        variant: "warning",
        color: "text-warning-600",
        bg: "bg-warning-50",
        dark: {
          color: "dark:text-orange-400",
          bg: "dark:bg-warning-500/15"
        }
      }
    },
    {
      id: 3,
      token: "1",
      name: "John Doe",
      status: {
        text: "Cancelled",
        variant: "error",
        color: "text-error-600",
        bg: "bg-error-50",
        dark: {
          color: "dark:text-error-500",
          bg: "dark:bg-error-500/15"
        }
      }
    },
    {
      id: 4,
      token: "1",
      name: "John Doe",
      status: {
        text: "Done",
        variant: "success",
        color: "text-success-600",
        bg: "bg-success-50",
        dark: {
          color: "dark:text-success-500",
          bg: "dark:bg-success-500/15"
        }
      }
    },
    {
      id: 5,
      token: "1",
      name: "John Doe",
      status: {
        text: "In-Queue",
        variant: "warning",
        color: "text-warning-600",
        bg: "bg-warning-50",
        dark: {
          color: "dark:text-orange-400",
          bg: "dark:bg-warning-500/15"
        }
      }
    },
    {
      id: 6,
      token: "1",
      name: "John Doe",
      status: {
        text: "Cancelled",
        variant: "error",
        color: "text-error-600",
        bg: "bg-error-50",
        dark: {
          color: "dark:text-error-500",
          bg: "dark:bg-error-500/15"
        }
      }
    }
  ];

  // Action button component
  const ActionButton = ({ type }) => (
    <p className="rounded-full border-[1px] px-2 py-0.5 text-theme-xs flex flex-row items-center gap-2 2xl:px-3 2xl:py-1.5 2xl:text-[14px] 2xl:font-normal">
      <svg 
        xmlns="http://www.w3.org/2000/svg" 
        width="10" 
        height="10" 
        fill="currentColor" 
        className="bi bi-pencil" 
        viewBox="0 0 16 16"
      >
        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"/>
      </svg>
      {type}
    </p>
  );

  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="w-full overflow-x-auto">
        <table className="min-w-full">
          {/* Table Header */}
          <thead>
            <tr className="border-y border-gray-100 dark:border-gray-800">
              <th className="py-3">
                <div className="flex items-center">
                  <p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
                    Token
                  </p>
                </div>
              </th>
              <th className="py-3 sm:columns-2 2xl:columns-2">
                <div className="flex items-center">
                  <p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
                    Name
                  </p>
                </div>
              </th>
              <th className="py-3 columns-0 sm:columns-0 2xl:columns-0">
                <div className="flex items-center justify-normal sm:justify-normal 2xl:justify-normal">
                  <p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
                    Status
                  </p>
                </div>
              </th>
              <th className="py-3">
                <div className="flex items-center justify-center col-span-1">
                  <p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400 hidden md:block 2xl:block">
                    Options
                  </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}>
                {/* Token Column */}
                <td className="py-3">
                  <div className="flex items-center -mt-7 ml-3 md:mt-0 md:mb-0 2xl:mb-0">
                    <p>{item.token}</p>
                  </div>
                </td>

                {/* Name Column */}
                <td className="py-3">
                  <div className="flex items-center -mt-8 md:mt-0 md:mb-0 2xl:mb-0">
                    <p className="text-gray-500 text-theme-sm dark:text-gray-400">
                      {item.name}
                    </p>
                    {/* Mobile Actions */}
                    <div className="flex items-center justify-center gap-2 mt-20 -ml-[4rem] sm:-ml-[4rem] md:hidden md:mt-0 md:ml-0 2xl:mt-0 2xl:ml-0">
                      <ActionButton type="Done" />
                      <ActionButton type="Missed" />
                    </div>
                  </div>
                </td>

                {/* Status Column */}
                <td className="py-3">
                  <div className="flex items-center justify-normal -mt-7 sm:justify-normal md:mt-0 md:mb-0 2xl:mb-0 2xl:justify-normal">
                    <p className={`rounded-full px-2 py-0.5 text-theme-xs font-medium ${item.status.bg} ${item.status.color} ${item.status.dark.bg} ${item.status.dark.color}`}>
                      {item.status.text}
                    </p>
                  </div>
                </td>

                {/* Options Column (Desktop) */}
                <td className="py-3">
                  <div className="hidden items-center justify-center gap-2 mt-8 -ml-[18rem] sm:-ml-[49rem] md:flex md:mt-0 md:ml-0 2xl:mt-0 2xl:ml-0">
                    <ActionButton type="Done" />
                    <ActionButton type="Missed" />
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default TableOne;