import { Separator } from "@kobalte/core/separator";

import { IconReceipt } from "@tabler/icons-solidjs";
import type { Receipt } from "../../network/types";

type Props = {
    item: Receipt;
};

export const SearchCardReceipt = ({ item }: Props) => {
    const { data } = item;

    return (
        <div class="h-full inset-0 p-3 bg-yellow-50">
            <div class="grid grid-cols-[auto_20px] gap-1 mb-1">
                <p class="text-sm text-neutral-900 font-bold">
                    {data.orderNumber} - {data.vendor}
                </p>
                <IconReceipt size={20} class="text-neutral-500 mt-1" />
            </div>
            <p class="text-xs text-neutral-500">
                {data.shippingAddress.address}
            </p>
            <Separator class="my-2" />
            <p class="text-xs text-neutral-500 line-clamp-2 overflow-hidden">
                {data.amount} {data.currency}
            </p>
        </div>
    );
};