"use client";

import Image from "next/image";
import { ImageOff } from "lucide-react";
import { useState } from "react";

type Props = {
  src: string;
  alt: string;
};

export function BlogHeroCover({ src, alt }: Props) {
  const [failed, setFailed] = useState(false);

  if (failed || !src) {
    return (
      <div className="flex aspect-[21/9] min-h-[200px] flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-200 bg-slate-50 text-slate-500">
        <ImageOff className="size-8 opacity-60" aria-hidden />
        <span className="text-sm font-medium">Cover image unavailable</span>
      </div>
    );
  }

  return (
    <div className="relative aspect-[21/9] min-h-[200px] w-full overflow-hidden rounded-2xl border border-slate-200/80 bg-slate-100 shadow-md">
      <Image
        src={src}
        alt={alt}
        fill
        className="object-cover"
        sizes="(max-width: 768px) 100vw, 768px"
        priority
        onError={() => setFailed(true)}
      />
    </div>
  );
}