import Image from 'next/image'
import Link from 'next/link'
import React from 'react'

interface RoomComponentProps {
  imageUrl: string
  imageAlt: string
  supTitle: string
  title: string
  summary: string
  readMoreLink: string
  bookNowLink: string
}

const RoomComponent: React.FC<RoomComponentProps> = ({
  imageUrl,
  imageAlt,
  supTitle,
  title,
  summary,
  readMoreLink,
  bookNowLink,
}) => {
  return (
    <div className="mt-10 max-w-[400px] mx-auto bg-white shadow-lg rounded-lg overflow-hidden transition-transform hover:scale-105">
      <div className="relative">
        {imageUrl && (
          <Image
            height={400}
            width={500}
            src={imageUrl}
            alt={imageAlt}
            className="w-full h-64 object-cover"
          />
        )}
        <Link
          href={readMoreLink}
          className="absolute inset-0"
          aria-hidden="true"
          tabIndex={-1}
        ></Link>
      </div>
      <div className="p-6">
        <h5 className="text-sm font-semibold text-gray-600 uppercase tracking-wide font-poppins">
          {supTitle}
        </h5>
        <h4 className="text-2xl font-bold text-gray-900 font-raleway mt-1">
          {title}
        </h4>
        <p className="mt-3 text-gray-700 leading-relaxed font-sans">
          {summary}
        </p>
        <div className="mt-6 flex space-x-4">
          <Link
            href={readMoreLink}
            className="inline-block px-5 py-2.5 text-brand border border-brand rounded-full hover:bg-brand hover:text-white transition-all duration-300"
          >
            Read more
          </Link>
          <Link
            href={bookNowLink}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-block px-5 py-2.5 text-white bg-brand rounded-full hover:bg-white hover:text-brand transition-all duration-300"
          >
            Book now
          </Link>
        </div>
      </div>
    </div>
  )
}

export default RoomComponent