export default function Page() {
  return (
    <section className="bg-gray-100">
      <div className="container mx-auto px-4 py-8">
        <div className="grid grid-cols-2 gap-8">
          <div>
            <h2 className="text-xl font-bold mb-4">My Collection</h2>
            <ul className="bg-white rounded shadow-md p-4">
              <li className="flex justify-between items-center py-2 border-b">
                <span>Song 1</span>
                <button className="text-red-500 hover:text-red-700">
                  Remove
                </button>
              </li>
              <li className="flex justify-between items-center py-2 border-b">
                <span>Song 2</span>
                <button className="text-red-500 hover:text-red-700">
                  Remove
                </button>
              </li>
            </ul>
          </div>

          <div>
            <h2 className="text-xl font-bold mb-4">Search Songs</h2>
            <div className="mb-4">
              <input
                type="text"
                placeholder="Search songs..."
                className="w-full border rounded-md px-4 py-2"
              />
            </div>

            <div className="bg-white rounded shadow-md p-4">
              <div className="flex justify-between items-center py-2 border-b">
                <span>Song 3</span>
                <button className="text-green-500 hover:text-green-700">
                  Add
                </button>
              </div>
              <div className="flex justify-between items-center py-2 border-b">
                <span>Song 4</span>
                <button className="text-green-500 hover:text-green-700">
                  Add
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
