import React from "react";

const loginAccounts = [
  {
    key: "1",
    type: "Admin",
    username: "demo",
    password: "5555",
  },
  {
    key: "2",
    type: "Staff",
    username: "staff",
    password: "1234",
  },
];

const LoginTable = ({ setDefaultValue }) => {
  const handleLoginClick = (account) => {
    setDefaultValue([{
      username: account.username,
      password: account.password
    }]);
  };

  return (
    <div className="space-y-3">
      <p className="text-sm text-gray-600 text-center mb-4">Quick Admin & Staff Login</p>
      <div className="grid grid-cols-2 gap-3">
        {loginAccounts.map((account) => (
          <button
            key={account.key}
            onClick={() => handleLoginClick(account)}
            className="bg-gradient-to-r from-blue-600 to-blue-600  text-white px-2 py-2 rounded-lg transition shadow-lg hover:shadow-xl text-lg font-semibold"
          >
            {account.type} Login
          </button>
        ))}
      </div>
    </div>
  );
};

export default LoginTable;
