
import { MdFavorite } from "react-icons/md"

import { Link } from "react-router-dom"
import Button from "../../components/Elements/Buttons"

import Drawer from "../../components/Fragments/Drawer"
import Footer from "../../components/Elements/Footer"
const Favorid = () => {
    return (
        <>
        <Drawer>
        <div className="grid lg:flex lg:justify-between m-3 border rounded-lg p-2 shadow-lg">
                    <div className="flex justify-center lg:max-w-md lg:w-full">
                        <img src="/image/mie.png" alt="" className="w-full max-w-xs lg:max-w-lg " />
                    </div>
                    <div className="grid px-2 gap-3 lg:mr-5">
                        <div className="flex justify-between">
                            <div className="flex items-center justify-between w-full">
                                <div className="max-w-[80%] lg:max-w-screen-md"> {/* Batas maksimal panjang teks */}
                                    <p className="text-md lg:text-xl">Food And Beverages</p>
                                    <h1 className="font-bold text-lg lg:text-1xl">
                                        VIENOODLE TRIPLE - ASAM LAKSA
                                    </h1>
                                </div>

                                <Link className="cursor-pointer flex-shrink-0"> {/* Mencegah elemen mengecil */}
                                    <MdFavorite className="text-3xl text-purple-400 lg:text-3xl" />
                                </Link>
                            </div>

                        </div>
                        <div className="max-w-full lg:max-w-screen-md xl:max-w-screen-lg"> {/* Batas maksimal panjang teks dan rata kanan kiri */}
                            <p className="text-md  lg:text-md whitespace-normal">
                                Experience the taste of Malaysia with Eskayvie Vienoodle Triple - All Flavours. Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident minus omnis suscipit incidunt tempora, natus eos ullam ad asperiores iste totam veniam dicta, esse quia facilis. Quia perferendis quod quam.
                            </p>
                        </div>

                        <div className="flex justify-between space-y-1">
                            <div className="flex flex-col">
                                <h1 className="font-bold text-xl xl:text-2xl text-[#AFA0D7]">$12.00 USD</h1>
                                <div className="flex items-center gap-2">
                                    <h1 className="font-medium text-md text-black line-through">$14.00 USD</h1>
                                </div>
                            </div>
                            <div className="flex h-10 gap-2 items-center">
                                <Button variant="text-white px-4 py-2">Add to cart</Button>
                            </div>
                        </div>
                    </div>
                </div>

        </Drawer>
            <Footer></Footer>
        </>
    )
}



export default Favorid