export const ClipDetail = ({ clip }: { clip: any }) => {
  return (
    <div className="space-y-4 flex-1 overflow-y-auto">
      {clip.image_url && (
        <img
          src={clip.image_url}
          alt={clip.title}
          className="w-48 h-48 object-cover rounded-lg"
        />
      )}
      <p className="text-2xl font-serif">{clip.title}</p>
      <p className="text-sm text-gray-400">
        Added by: {clip.submitterUsername || "Anon"}
      </p>
      <p className="text-sm">{clip.metadata?.["tags"]}</p>
      <p className="text-sm whitespace-pre">{clip.metadata?.["prompt"]}</p>
    </div>
  );
};