import Image from "next/image";

type EmptyStateProps = {
  title: string;
  description: string;
};

export default function EmptyState({ title, description }: EmptyStateProps) {
  return (
    <section className="rounded-benell border border-benell-stroke bg-benell-surface p-5 shadow-benell md:p-8">
      <div className="grid gap-6 md:grid-cols-[1fr_auto] md:items-center">
        <div className="min-w-0">
          <h2 className="text-h2 break-words font-semibold">{title}</h2>
          <p className="text-body-lg mt-2 text-benell-text-soft">{description}</p>
          <p className="text-body mt-4 text-benell-text-soft">
            Esta vista estará disponible en la siguiente iteración del prototipo.
          </p>
        </div>
        <Image
          src="/brand/mascot.png"
          width={220}
          height={220}
          alt="Mascota Casa Benell"
          className="h-36 w-36 rounded-benell border border-benell-stroke object-contain object-center md:h-44 md:w-44"
        />
      </div>
    </section>
  );
}
