"use client";

import type { Memory, Project } from "@imemio/sdk";
import { ProjectBadge } from "./project-badge";

type MemoryWithProject = Memory & {
	project: Project | null;
};

type MemoryCardProps = {
	memory: MemoryWithProject;
	onEdit: () => void;
	onDelete: () => void;
	isDeleting?: boolean;
};

export function MemoryCard({
	memory,
	onEdit,
	onDelete,
	isDeleting,
}: MemoryCardProps) {
	return (
		<div className="flex flex-col gap-2 border border-[#2a2a2a] bg-[#0f0f0f] p-3">
			<div className="flex items-start justify-between gap-4">
				<div className="flex-1">
					<p className="whitespace-pre-wrap text-white">{memory.content}</p>
				</div>
			</div>

			<div className="flex items-center justify-between">
				<div className="flex items-center gap-2">
					{memory.project && (
						<ProjectBadge
							isGlobal={memory.project.isGlobal}
							name={memory.project.name}
						/>
					)}

					<span className="text-xs text-[#666666]">
						{new Date(memory.createdAt).toLocaleString()}
					</span>
				</div>

				<div className="flex gap-2">
					<button
						className="border border-[#2a2a2a] bg-[#0f0f0f] px-3 py-1 text-xs text-[#999999] transition hover:border-[#666666] hover:text-white"
						onClick={onEdit}
						type="button"
					>
						edit
					</button>

					<button
						className="border border-[#2a2a2a] bg-[#0f0f0f] px-3 py-1 text-xs text-[#999999] transition hover:border-[#662222] hover:text-[#ff6666]"
						disabled={isDeleting}
						onClick={onDelete}
						type="button"
					>
						{isDeleting ? "deleting ..." : "delete"}
					</button>
				</div>
			</div>
		</div>
	);
}