'use client';

import Image from 'next/image';
import React from 'react';

interface ComingSoonProps {
  title?: string;
  subtitle?: string;
  imageUrl?: string;
  height?: number | string;
}

const ComingSoon: React.FC<ComingSoonProps> = ({
  title = 'Coming Soon',
  subtitle = "We're working on something amazing. Stay tuned!",
  imageUrl = '/comingsoon.gif',
  height = '100vh',
}) => {
  return (
    <div className="relative w-full" style={{ height }}>
      {/* Background Image */}
      <Image
        src={imageUrl}
        alt={title}
        fill
        className="object-cover"
        priority
      />

      {/* Overlay */}
      <div className="absolute inset-0 bg-black bg-opacity-60 flex flex-col justify-center items-center text-white px-6 text-center">
        <h1 className="text-3xl md:text-5xl font-bold mb-4">{title}</h1>
        <p className="text-base md:text-lg max-w-xl">{subtitle}</p>
             
                <p className="flex items-center gap-2 text-sm md:text-lg max-w-xl">
                📞 Contact: +971-56-451-8089
              </p>

              <p className="flex items-center gap-2 text-sm md:text-lg max-w-xl">
                📧 Email: apply@banksfinders.com
              </p>
      </div>
    </div>
  );
};

export default ComingSoon;