import { Card, CardBody } from "@nextui-org/react";
import Image from "next/image";

export default function VisiMisi() {
    return (
        <div className='h-screen m-7'>
            <div className='h-1/3 w-1/4 p-3 text-green-600'>
                <p className='text-3xl font-bold'>Visi & Misi</p>
                <p className='pt-3'>Setelah Perjalanan Panjang dari Aceh hingga Papua, lahirlah visi dengan semangat perubahan yang di impikan oleh jutaan rakyat: "Indonesia Makmur untuk Semua".</p>
            </div>
            <div className='h-2/3 flex gap-3 '>
                <div className='w-1/4 my-auto'>
                    <Image
                        height={400}
                        width={400}
                        src='/frame.png'
                        alt='banner'
                    />
                </div>
                <div className='w-3/4 flex gap-5 my-auto justify-center'>
                    <Card className="h-[420px] w-[300px]">
                        <CardBody>
                            <Image
                                alt="vm"
                                className="object-cover"
                                src="/vm1.jpg"
                                fill={true}
                            />
                        </CardBody>
                    </Card>
                    <Card className="h-[420px] w-[300px]">
                        <CardBody>
                            <Image
                                alt="vm"
                                className="object-cover"
                                src="/vm2.jpg"
                                fill={true}
                            />
                        </CardBody>
                    </Card>
                    <Card className="h-[420px] w-[300px]">
                        <CardBody>
                            <Image
                                alt="vm"
                                className="object-cover"
                                src="/vm3.jpg"
                                fill={true}
                            />
                        </CardBody>
                    </Card>
                    {/* <div className='w-1/3'>
                        <Card className='bg-transparent'>
                            <CardBody>
                                <Image
                                    alt="Card background"
                                    className="object-fill rounded-xl"
                                    src="/vm1.jpg"
                                    height={900}
                                    width={400}
                                />
                            </CardBody>
                        </Card>
                    </div> */}
                    {/* <div className='w-1/3'>
                        <Card className='h-full'>
                            <CardBody>
                                <Image
                                    alt="Card background"
                                    className="object-fill rounded-xl"
                                    src="/vm4.jpg"
                                    fill={true}
                                />
                            </CardBody>
                        </Card>
                    </div>
                    <div className='w-1/3'>
                        <Card className='h-full'>
                            <CardBody>
                                <Image
                                    alt="Card background"
                                    className="object-cover rounded-xl"
                                    src="/vm2.jpg"
                                    fill={true}
                                />
                            </CardBody>
                        </Card>
                    </div> */}
                </div>
            </div>
        </div>
    )
}