import Image from "next/image";

export default function PhotoPanel({
  src,
  alt,
  tag,
  className = "",
  priority = false,
}: {
  src: string;
  alt: string;
  tag?: string;
  className?: string;
  priority?: boolean;
}) {
  return (
    <div className={`relative overflow-hidden rounded-3xl border border-ink-700 ${className}`}>
      <Image
        src={src}
        alt={alt}
        fill
        priority={priority}
        sizes="(min-width: 1024px) 1152px, 100vw"
        className="object-cover"
      />
      <div className="absolute inset-0 bg-ink-950/35" />
      <div
        className="absolute inset-0"
        style={{ background: "linear-gradient(to top, rgba(5,7,10,0.85), rgba(5,7,10,0.05) 45%)" }}
      />
      <div
        className="absolute inset-0 mix-blend-color"
        style={{ backgroundColor: "var(--color-river-600)", opacity: 0.18 }}
      />
      {tag && (
        <div className="absolute left-5 top-5 rounded-md border border-ink-700 bg-ink-950/80 px-2.5 py-1 font-mono text-[11px] text-ink-300 backdrop-blur">
          {tag}
        </div>
      )}
    </div>
  );
}