import React from 'react'
import { Card } from '../ui/card'
import Image from 'next/image'
import Car from '@/assets/images/car.png'
import {
  Dialog,
  DialogContent,
  DialogTrigger,
} from "@/components/ui/dialog"
import InvoiceDialog from './invoice'

const PaymentHistoryCard = ({ data, tab }: { data?: any, tab?: string }) => {
  return (
    <main>
      <Card className=' bg-white p-5  flex flex-row justify-between flex-wrap items-start'>
        <div className=' flex flex-row gap-3 items-start'>
          <Image width={80} src={Car} alt='' />
          <div className=' flex flex-col'>
            <h1 className=' text-black font-bold text-lg'>Mercedes Benz</h1>
            <span className=' text-gray-500 font-medium text-sm'>cindy@gmail.com</span>
            <span className=' text-gray-500 font-medium text-sm'>1/1/2024</span>
            <span className=' text-primary font-semibold text-md'>$130.00</span>
          </div>
        </div>
        {tab == 'revenue' ?
          <div className=''>
            <Dialog>
              <DialogTrigger asChild>
                <span className=' text-primary font-semibold text-md cursor-pointer'>View Detail</span>
              </DialogTrigger>
              <DialogContent className="bg-white text-black p-0.5 ">
                <InvoiceDialog title='Invoice' />
              </DialogContent>
            </Dialog>
          </div>
          : tab == "donations" ?
            <div className=''>
              <Dialog>
                <DialogTrigger asChild>
                  <span className=' text-primary font-semibold text-md cursor-pointer'>View Receipt</span>
                </DialogTrigger>
                <DialogContent className="bg-white text-black p-0.5 ">
                  <InvoiceDialog title='Invoice' />

                </DialogContent>
              </Dialog>
            </div> :
            <div className=''>
              <Dialog>
                <DialogTrigger asChild>
                  <span className=' text-primary font-semibold text-md cursor-pointer'>View Receipt</span>
                </DialogTrigger>
                <DialogContent className="bg-white text-black p-0.5 ">
                  <InvoiceDialog title='Invoice' />
                </DialogContent>
              </Dialog>
            </div>
        }
      </Card>
    </main>
  )
}

export default PaymentHistoryCard