"use client";

import type { Plan } from "@/lib/plans";

interface PlanCardProps {
	plan: Plan;
	isActive: boolean;
	onView: () => void;
	onRemove: () => void;
}

export default function PlanCard({ plan, isActive, onView, onRemove }: PlanCardProps) {
	return (
		<div className={`flex items-center gap-3 px-4 py-3 bg-raised border rounded-lg ${isActive ? "border-accent" : "border-border"}`}>
			<div className="flex-1 min-w-0">
				<p className="text-sm font-medium text-text-primary truncate">{plan.title}</p>
				<p className="text-xs text-text-secondary truncate">{plan.url}</p>
			</div>
			<div className="flex gap-2 shrink-0">
				<button
					type="button"
					onClick={onView}
					className={`px-3 py-1 rounded-lg text-xs transition-colors ${
						isActive
							? "bg-accent text-white"
							: "border border-border text-text-secondary hover:text-accent hover:border-accent"
					}`}
				>
					{isActive ? "Viewing" : "View"}
				</button>
				<button
					type="button"
					onClick={onRemove}
					className="px-3 py-1 border border-border rounded-lg text-xs text-text-secondary hover:text-danger hover:border-danger transition-colors"
				>
					Remove
				</button>
			</div>
		</div>
	);
}