import { Card } from '@/components/ui/card'
import Image from 'next/image'
import React from 'react'
import imagee from '@/assets/icons/maw-white.svg'
import { Button } from '@/components/ui/button'
function Invoice({ title }: { title: string }) {
    return (
        <div>
            <div className=' bg-white p-8 text-black rounded-lg min-w-96 space-y-5' >
                <div className=' flex flex-row justify-between gap-10 items-start'>
                    <div className=' bg-black h-28 w-28'>
                        <Image src={imagee} alt='' />
                    </div>
                    <div className=' flex flex-col items-end justify-end'>
                        <h1 className='font-bold text-2xl uppercase'>{title}</h1>
                        <p className='text-sm text-gray-500'>#212332</p>
                        <p className='text-sm text-gray-500'>Status: <span className=' text-black font-semibold'>Complete</span></p>
                    </div>
                </div>
                <div>
                    <div className=' flex flex-row justify-between gap-5 items-start'>
                        <div className=' flex flex-row gap-1'>
                            <div className=' '>
                                <p className='text-gray-400'>Bill From</p>
                                <p className=' text-black text-sm '>CindyB</p>
                                <p className=' text-black text-sm '>Marina bay, Singapore</p>
                                <p className=' text-black text-sm '>cindyb@gmail.com</p>
                                <p className=' text-black text-sm '>+1234567890</p>
                            </div>
                            <div className=' '>
                                <p className='text-gray-400'>Bill To</p>
                                <p className=' text-black text-sm '>CindyB</p>
                                <p className=' text-black text-sm '>Marina bay, Singapore</p>
                                <p className=' text-black text-sm '>cindyb@gmail.com</p>
                                <p className=' text-black text-sm '>+1234567890</p>
                            </div>
                        </div>
                        <div className='text-xs text-end'>
                            <p className='text-gray-500'>Date: Nov 21,2023</p>
                            <p className='text-gray-500'>Payment Method: Credit Card</p>
                            <p className='text-gray-500'>Payment Type: Licensed Image</p>
                        </div>
                    </div>
                </div>
                <table className='w-full text-sm' cellPadding={3}>
                    <tr className='bg-gray-800 text-white'>
                        <td className='text-center'>#</td>
                        <td>Description</td>
                        <td>Fee</td>
                    </tr>
                    <tr className=''>
                        <td className='text-center'>01</td>
                        <td>Booking For Photoshoot</td>
                        <td>$25</td>
                    </tr>
                </table>
                <div className='text-xs space-y-1'>
                    <h4 className='text-gray-400'>Note:</h4>
                    <p>Thank you business</p>
                </div>
                <div className='flex justify-end text-sm'>
                    <table>
                        <tr>
                            <td className='px-5 text-gray-400'>Subtotal</td>
                            <td className='px-5 text-end'>$25.00</td>
                        </tr>
                        <tr>
                            <td className='px-5 text-gray-400'>Tax (0%)</td>
                            <td className='px-5 text-end'>$00.00</td>
                        </tr>
                        <tr>
                            <td className='px-5 text-gray-400'>Amount</td>
                            <td className='px-5 text-end'>$25.00</td>
                        </tr>
                    </table>
                </div>
                <div className='flex justify-end'>
                    <Button>Download</Button>
                </div>
            </div >
        </div >
    )
}

export default Invoice