import { Chip } from "@/components/ui/Chip";

export function TransactionRow({ merchant, category, amount, date }: { merchant: string; category: string; amount: string; date: string }) {
  return (
    <div className="flex items-center justify-between rounded-lg border border-forest/8 bg-white/60 p-3 dark:border-white/10 dark:bg-white/[0.04]">
      <div>
        <p className="font-semibold text-ink dark:text-paper">{merchant}</p>
        <p className="text-sm text-ink/55 dark:text-paper/55">{date}</p>
      </div>
      <div className="text-right">
        <p className="font-bold text-ink dark:text-paper">{amount}</p>
        <Chip>{category}</Chip>
      </div>
    </div>
  );
}