import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Heading } from "@/components/ui/typography/heading";
import { Paragraph } from "@/components/ui/typography/paragraph";
import type { AnnotationWithUser } from "@shared/schema";
import { AnnotationFilters } from "./annotation-filters";

interface AnnotationBrowserProps {
	annotations: AnnotationWithUser[];
	onSelect?: (annotation: AnnotationWithUser) => void;
}

export function AnnotationBrowser({
	annotations,
	onSelect,
}: AnnotationBrowserProps) {
	// TODO: Add filter state and logic
	return (
		<div className="space-y-4">
			<AnnotationFilters />
			{annotations.map((annotation) => (
				<Card
					key={annotation.id}
					className="cursor-pointer hover:shadow-md"
					onClick={() => onSelect?.(annotation)}
				>
					<CardHeader className="flex flex-row items-center gap-3 p-4">
						<Avatar>
							<AvatarImage
								src={annotation.user.avatar || ""}
								alt={annotation.user.name}
							/>
							<AvatarFallback>
								{annotation.user.name.charAt(0).toUpperCase()}
							</AvatarFallback>
						</Avatar>
						<div>
							<Heading level="h4" className="mb-1">
								{annotation.user.name}
							</Heading>
							<Paragraph size="xs" variant="muted">
								{new Date(annotation.createdAt).toLocaleString()}
							</Paragraph>
						</div>
					</CardHeader>
					<CardContent className="p-4 pt-0">
						<Paragraph size="sm">{annotation.content}</Paragraph>
					</CardContent>
				</Card>
			))}
		</div>
	);
}