import { useState } from "react";
import { profile } from "../data/profile";

export default function PhotoFrame({ src, alt, className = "" }) {
  const [errored, setErrored] = useState(false);
  const isPlaceholder = !src || src.startsWith("[") || errored;

  return (
    <div
      className={`glow-border rounded-3xl overflow-hidden aspect-[4/5] ${className}`}
    >
      {isPlaceholder ? (
        <div className="h-full w-full grid place-items-center bg-gradient-to-br from-[color:var(--color-surface)] to-[color:var(--color-bg-soft)] border border-[color:var(--color-border)]">
          <span className="font-display text-5xl text-gradient">{profile.initials}</span>
        </div>
      ) : (
        <img
          src={src}
          alt={alt}
          onError={() => setErrored(true)}
          className="h-full w-full object-cover"
        />
      )}
    </div>
  );
}
