import { type Event } from "nostr-tools";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { useProfileMetadata } from "@/lib/use-profile-metadata";

// Helper function to format timestamp (optional)
const formatTimestamp = (timestamp: number): string => {
  return new Date(timestamp * 1000).toLocaleString();
};

interface NoteCardProps {
  event: Event;
}

export function NoteCard({ event }: NoteCardProps) {
  // Fetch profile metadata for this note's author
  const { profile, displayName, displayHandle } = useProfileMetadata(event.pubkey);
  
  // Create avatar fallback (first letter of name or '?')
  const avatarFallback = profile.name 
    ? profile.name.charAt(0).toUpperCase() 
    : '?';

  return (
    <Card className="w-full max-w-xl break-words">
      <CardHeader>
        <div className="flex items-center space-x-3">
          <Avatar>
            <AvatarImage src={profile.picture} alt={displayName} />
            <AvatarFallback>{avatarFallback}</AvatarFallback>
          </Avatar>
          <div>
            <CardTitle>{displayName}</CardTitle>
            <CardDescription>{displayHandle}</CardDescription>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <p className="whitespace-pre-wrap">{event.content}</p>
      </CardContent>
      <CardFooter>
        <p className="text-sm text-muted-foreground">
          {formatTimestamp(event.created_at)}
        </p>
        {/* Add other footer elements like reactions, replies later */}
      </CardFooter>
    </Card>
  );
}