import { AWS_CDN_URL } from "@/utils/staticValues";
import Image from "next/image";
import Link from "next/link";
import { title } from "process";


export default function CcDesignHouseList(props:any) {
  const {otherCoCreator}=props;
  return (
    <div className="grid grid-cols-1 gap-8 py-10 md:grid-cols-2 lg:grid-cols-3">
      {otherCoCreator && otherCoCreator.map((item:any) => (
        <div
          key={item.id}
          className="relative flex flex-col overflow-hidden border-1 border-gray-950/50 bg-white/50 p-5 duration-300 hover:bg-teal-300/50 md:p-8"
        >
          <div className="absolute bottom-0 left-0 h-full w-full scale-110 bg-[url(/images/butterfly-thred-gray.png)] bg-contain opacity-25"></div>
          <Link href={item.slug} className="relative z-10 flex w-full flex-col">
            <div className="flex w-full overflow-hidden border-1">
              <div>
              <Image
                  src={`${AWS_CDN_URL}/${item.bio_image}`}
                  width={600}
                  height={1000}
                  alt={item.name}
                  className="img-responsvie"
                />
              </div>
            </div>
            <div className="relative flex w-full flex-row justify-start pt-8 text-left underline-offset-6 hover:underline">
              <span className="font-bogart text-xl/5 capitalize">
                {item.name}
              </span>
              <span className="relative">
                <i className="icon-[solar--arrow-right-up-broken]"></i>
              </span>
            </div>
            <div className="text-left text-xs line-clamp-3">{item.bio}</div>
          </Link>
        </div>
      ))}
    </div>
  );
}