import Link from "next/link";

type RoomCardData = {
  id: string;
  name: string;
  slug: string;
  description: string | null;
  coverImage: string | null;
};

const GRADIENTS = [
  "from-accent to-accent-2",
  "from-accent-2 to-ink",
  "from-ink to-accent",
  "from-accent-dark to-accent-2",
];

function pickGradient(id: string) {
  const sum = [...id].reduce((acc, ch) => acc + ch.charCodeAt(0), 0);
  return GRADIENTS[sum % GRADIENTS.length];
}

export function RoomCard({ room, featured = false }: { room: RoomCardData; featured?: boolean }) {
  return (
    <Link
      href={`/odalar/${room.slug}`}
      className={`card-lift group flex overflow-hidden rounded-2xl border border-border bg-surface shadow-[0_1px_2px_rgba(30,15,8,.05),0_8px_20px_rgba(30,15,8,.06)] ${
        featured ? "h-full flex-col sm:flex-row" : "flex-col"
      }`}
    >
      <div className={`relative shrink-0 overflow-hidden ${featured ? "h-44 sm:h-auto sm:w-2/5" : "h-28"}`}>
        {room.coverImage ? (
          <>
            {/* eslint-disable-next-line @next/next/no-img-element -- yerel diskten servis edilen kullanıcı içeriği */}
            <img
              src={room.coverImage}
              alt={room.name}
              className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
            />
            <div className="absolute inset-0 bg-black/10" />
          </>
        ) : (
          <div className={`relative flex h-full w-full items-center justify-center bg-gradient-to-br ${pickGradient(room.id)}`}>
            <div className="pattern-diagonal absolute inset-0" />
            <svg className="relative" width={featured ? 44 : 30} height={featured ? 44 : 30} viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
              <path d="M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H9l-5 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z" />
            </svg>
          </div>
        )}
      </div>
      <div className={`flex flex-1 flex-col gap-1.5 ${featured ? "justify-center p-6" : "p-5"}`}>
        <h3 className={featured ? "text-[21px] font-bold" : "text-[15.5px] font-bold"}>{room.name}</h3>
        {room.description && (
          <p className={`text-text-muted ${featured ? "line-clamp-3 text-[13.5px]" : "line-clamp-2 text-[12.5px]"}`}>
            {room.description}
          </p>
        )}
        <span className="mt-auto pt-2 text-[12px] font-semibold text-accent">Odayı Keşfet →</span>
      </div>
    </Link>
  );
}