import Link                                   from "next/link";
import { Empty, EmptyHeader, EmptyTitle }     from "@/components/ui/empty";
import { EmptyDescription, EmptyMedia }       from "@/components/ui/empty";
import { Item, ItemContent, ItemDescription } from "@/components/ui/item";
import { ItemGroup, ItemMedia, ItemTitle }    from "@/components/ui/item";
import { Filter }                             from "lucide-react";

import type { TradingWalletTransactionType } from '@/generated/prisma/client';

export function RecentTransactions({ transactions }: {
  transactions: {
    date: Date;
    type: TradingWalletTransactionType;
    amount: number;
    currency: string;
  }[];
}) {
  return (
    <div className="min-h-full flex flex-col">
      <div className="leading-none font-semibold">Recent Transactions</div>
      <div className="p-3 border border-border rounded-xl mt-3">
        <ItemGroup className="gap-4">
          {transactions.length === 0 ? (
            <Empty>
              <EmptyMedia variant="icon"><Filter /></EmptyMedia>
              <EmptyHeader>
                <EmptyTitle>No transactions</EmptyTitle>
                <EmptyDescription>You have not made any transactions on your accounts.</EmptyDescription>
              </EmptyHeader>
            </Empty>
          ) : (
            transactions.map((txn, i) => (
              <Item key={i + 'txn-item'} variant="outline" asChild role="listitem" size="sm">
                <Link href="/accounts">
                  <ItemMedia>
                    IN
                  </ItemMedia>
                  <ItemContent>
                    <ItemTitle className="line-clamp-1">
                      Withdrawal -{" "}
                      {/* <span className="text-muted-foreground"></span> */}
                    </ItemTitle>
                    <ItemDescription></ItemDescription>
                  </ItemContent>
                  <ItemContent className="flex-none text-center">
                    <ItemDescription>Dec 05, 2025 at 04:13 PM</ItemDescription>
                  </ItemContent>
                </Link>
              </Item>
            ))
          )}
        </ItemGroup>
      </div>
    </div>
  );
}