export type UserRankingProps = {
  title: string;
  subtitle: string;
  users: {
    name: string;
    desc: string;
  }[];
};

export default function UserRankingSection({
  title,
  subtitle,
  users,
}: UserRankingProps) {
  return (
    <section className="relative bg-[#EAF0FF] bg-[linear-gradient(180deg,#FCF5DC_0%,#FFF_100%)] py-12 font-inter md:py-28">
      <div className="container flex flex-col items-start gap-8 px-4 md:flex-row md:justify-between md:gap-12 md:px-28">
        <div className="flex flex-1 flex-col">
          <h2 className="mb-6 font-poppins text-2xl font-bold text-[#23262F] md:text-[40px]">
            {title}
          </h2>
          <p className="mb-10 max-w-[560px] text-[#353945]">{subtitle}</p>
          <div className="flex flex-col gap-2.5 md:flex-row">
            {users?.map((user, i) => (
              <div
                key={i}
                className="flex flex-1 flex-col items-start justify-center gap-2.5 rounded-[10px] border border-[#F4F5F6] bg-white p-[22px] shadow-[0_2.213px_8.851px_0_rgba(15,15,15,0.08)]"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="22"
                  height="22"
                  viewBox="0 0 22 22"
                  fill="none"
                  className="h-[22px] w-[22px] shrink-0"
                  aria-hidden
                >
                  <circle cx="11" cy="11" r="11" fill="#FFE0E2" />
                </svg>
                <span className="text-base font-semibold text-[#23262F]">
                  {user.name}
                </span>
                <p className="text-sm leading-5 text-[#353945]">{user.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}