'use client'
import React from 'react'
import ProductsList from '@/blocks/products-list'
import Image from 'next/image'
import CarImage from '@/assets/images/car-landscape.png'
import ProfileCard from '@/components/shared/profile-card'
import RelatedKeywords from '@/components/shared/related-keywords'

const Page = ({ params }: { params: any }) => {

    console.log(params, "Params")
    return (
        <main className='container my-10'>

            <Image src={CarImage} width={200} height={100} alt='' className='object-cover w-full max-h-96  rounded-lg border border-white' />
            <div className='flex md:flex-row flex-col gap-4 mb-5 mt-10'>
                <div className='basis-2/3 pr-4 grid gap-1'>
                    <h4 className='font-thin text-2xl underline'>Description</h4>
                    <h3 className='font-semibold text-xl'>1978 Orange Mustang</h3>
                    <p className='text-gray-400 !font-light text-lg'>The 1978 Orange Mustang is a vibrant symbol of automotive nostalgia. With its eye-catching orange exterior, this classic beauty is powered by a robust engine, delivering a thrilling driving experience. The retro-inspired interior blends style with comfort, making it an iconic choice for enthusiasts seeking a timeless ride.</p>
                    <div className='flex gap-3'>
                        <span>Make: <b>Ford</b></span>|
                        <span>Model: <b>Heighten Exhilaration</b></span>|
                        <span>Year: <b>1999</b></span>
                    </div>
                    <RelatedKeywords />
                </div>
                <div className='basis-1/3 flex justify-center'>
                    <ProfileCard />
                </div>
            </div>
            <ProductsList />
        </main>
    )
}

export default Page