export function BasicCommentsListWithLikeAndCtaButton() {
  return (
    <section className="relative py-24">
      <div className="mx-auto w-full max-w-7xl px-4 md:px-5 lg:px-5">
        <div className="inline-flex w-full flex-col items-start justify-start gap-7 lg:gap-14">
          <h2 className="font-manrope text-4xl leading-normal font-bold text-gray-900">
            Comments
          </h2>
          <div className="flex w-full flex-col items-start justify-start gap-8">
            <div className="flex w-full flex-col items-start justify-start rounded-3xl border border-gray-200 bg-white p-5 lg:p-8">
              <div className="flex w-full flex-col items-start justify-start gap-3.5">
                <div className="inline-flex w-full items-center justify-between">
                  <div className="flex items-center justify-start gap-2.5">
                    <div className="flex h-10 w-10 items-start justify-start gap-2.5 rounded-full bg-stone-300">
                      <img
                        className="rounded-full object-cover"
                        src="https://pagedone.io/asset/uploads/1710225753.png"
                        alt="John smith image"
                      />
                    </div>
                    <div className="inline-flex flex-col items-start justify-start gap-1">
                      <h5 className="text-sm leading-snug font-semibold text-gray-900">
                        John smith
                      </h5>
                      <h6 className="text-xs leading-5 font-normal text-gray-500">
                        5 Day ago
                      </h6>
                    </div>
                  </div>
                  <div className="group flex items-center justify-end">
                    <div className="flex items-center justify-center rounded-xl border border-gray-400 px-5 py-2.5 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out hover:border-green-600">
                      <a href="#"></a>
                      <div className="flex items-center justify-center px-2">
                        <h5 className="text-base leading-relaxed font-semibold text-gray-400 transition-all duration-700 ease-in-out group-hover:text-green-600">
                          34
                        </h5>
                      </div>
                    </div>
                  </div>
                </div>
                <p className="text-sm leading-snug font-normal text-gray-800">
                  Mauris luctus habitasse turpis elementum vitae in. Ut
                  habitasse orci sed aliquam bibendum. Sem in nisl vestibulum
                  rhoncus sed diam amet nulla. Netus feugiat nunc vulputate eros
                  pellentesque. A at augue elementum aliquet in aliquet. Vitae
                  amet quisque massa egestas amet. Vitae id ipsum lacus tellus
                  facilisis sit. Nunc ut pellentesque lacus massa arcu neque mi
                  ultrices convallis.
                </p>
              </div>
            </div>
            <div className="flex w-full flex-col items-start justify-start gap-2.5 rounded-3xl border border-gray-200 bg-white p-5 lg:p-8">
              <div className="flex w-full flex-col items-start justify-start gap-3.5">
                <div className="inline-flex w-full items-center justify-between">
                  <div className="flex items-center justify-start gap-2.5">
                    <div className="flex h-10 w-10 items-start justify-start gap-2.5 rounded-full bg-stone-300">
                      <img
                        className="h-10 w-10 rounded-full object-cover"
                        src="https://pagedone.io/asset/uploads/1710238051.png"
                        alt="Emma Davis image"
                      />
                    </div>
                    <div className="inline-flex flex-col items-start justify-start gap-1">
                      <h5 className="text-sm leading-snug font-semibold text-gray-900">
                        Emma Davis
                      </h5>
                      <h6 className="text-xs leading-5 font-normal text-gray-500">
                        4 Day ago
                      </h6>
                    </div>
                  </div>
                  <div className="group flex items-center justify-end">
                    <div className="flex items-center justify-center rounded-xl border border-gray-400 px-5 py-2.5 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out hover:border-green-600">
                      <a href="#"></a>
                      <div className="flex items-center justify-center px-2">
                        <h6 className="text-base leading-relaxed font-semibold text-gray-400 transition-all duration-700 ease-in-out group-hover:text-green-600">
                          30
                        </h6>
                      </div>
                    </div>
                  </div>
                </div>
                <p className="text-sm leading-snug font-normal text-gray-800">
                  Consectetur proin ac ac urna nulla gravida praesent id.
                  Dapibus elementum bibendum non diam vel. Pellentesque ut risus
                  sit pretium. Quis ac interdum at habitant montes molestie.
                  Amet nunc dapibus at molestie amet. Cursus ullamcorper ipsum
                  phasellus id nisl euismod accumsan. Pellentesque fermentum
                  mauris purus commodo enim. Consequat est ipsum viverra
                  curabitur.
                </p>
              </div>
            </div>
            <div className="flex w-full flex-col items-end justify-start gap-2.5 rounded-3xl border border-gray-200 bg-white p-5 lg:p-8">
              <div className="flex w-full flex-col items-end justify-start gap-3.5">
                <div className="inline-flex w-full items-center justify-between">
                  <div className="flex w-full items-center justify-start gap-2.5">
                    <div className="flex h-10 w-10 items-start justify-start gap-2.5 rounded-full bg-slate-400">
                      <img
                        className="h-10 w-10 rounded-full object-cover"
                        src="https://pagedone.io/asset/uploads/1710237485.png"
                        alt="Danial Harrison image"
                      />
                    </div>
                    <div className="inline-flex flex-col items-start justify-start gap-1">
                      <h5 className="text-sm leading-snug font-semibold text-gray-900">
                        Danial Harrison
                      </h5>
                      <h6 className="text-xs leading-5 font-normal text-gray-500">
                        5 Hour ago
                      </h6>
                    </div>
                  </div>
                  <div className="group flex items-center justify-end">
                    <div className="flex items-center justify-center rounded-xl border border-gray-400 px-5 py-2.5 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out hover:border-green-600">
                      <a href="#"></a>
                      <div className="flex items-center justify-center px-2">
                        <h6 className="text-base leading-relaxed font-semibold text-gray-400 transition-all duration-700 ease-in-out group-hover:text-green-600">
                          80
                        </h6>
                      </div>
                    </div>
                  </div>
                </div>
                <p className="text-sm leading-snug font-normal text-gray-800">
                  Malesuada rhoncus senectus amet dui tincidunt. Porttitor
                  lectus diam sit sit pellentesque ultrices. Molestie libero ac
                  odio at tristique sapien est venenatis. Egestas vitae velit
                  vestibulum egestas felis euismod. Morbi ac vel scelerisque
                  morbi eu nisi gravida tellus. Pulvinar orci at elementum massa
                  morbi pellentesque non nulla. Elementum faucibus urna est
                  mattis. Non aliquet in molestie id nisl. Bibendum mauris dolor
                  nisl elit ut eu viverra. Ut facilisi turpis neque eu risus
                  etiam senectus vel. Orci pharetra ornare amet massa. Tempus
                  orci vestibulum pulvinar tincidunt amet dictum sit tempor.
                </p>
                <div className="inline-flex w-full items-start justify-end gap-6">
                  <button className="flex w-full items-center justify-center rounded-xl border border-gray-200 px-5 py-2.5 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out hover:border-transparent hover:bg-gray-200 sm:w-fit">
                    <span className="px-2 text-base leading-relaxed font-semibold text-gray-900">
                      Delete
                    </span>
                  </button>
                  <button className="flex w-full items-center justify-center rounded-xl bg-green-600 px-5 py-2.5 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] transition-all duration-700 ease-in-out hover:bg-green-700 sm:w-fit">
                    <span className="px-2 py-px text-base leading-relaxed font-semibold text-white">
                      Edit
                    </span>
                  </button>
                </div>
              </div>
            </div>
            <div className="relative flex w-full justify-between gap-2">
              <input
                type="text"
                className="w-full rounded-lg border border-gray-300 bg-white px-5 py-3 text-lg leading-relaxed font-normal text-gray-900 placeholder-gray-400 shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] focus:outline-none"
                placeholder="Leave a constructive comment..."
              />
              <a className="absolute top-[18px] right-6"></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}