'use client'

import { useState } from 'react'
import {
  Radio,
  RadioGroup,
  Tab,
  TabGroup,
  TabList,
  TabPanel,
  TabPanels,
} from '@headlessui/react'
import { StarIcon } from '@heroicons/react/20/solid'
import { HeartIcon } from '@heroicons/react/24/outline'

const product = {
  name: 'VEDA III',
  images: [
    {
      id: 1,
      name: 'Veda',
      src: '/images/veda31.jpg',
      alt: 'Veda1',
    },
    {
      id: 1,
      name: 'Veda',
      src: '/images/veda32.jpg',
      alt: 'Veda1',
    },
    {
      id: 1,
      name: 'Veda',
      src: '/images/veda33.jpg',
      alt: 'Veda1',
    },
    {
      id: 1,
      name: 'Veda',
      src: '/images/veda34.jpg',
      alt: 'Veda1',
    },
    {
      id: 1,
      name: 'Veda',
      src: '/images/veda35.jpg',
      alt: 'Veda1',
    },
    {
      id: 1,
      name: 'Veda',
      src: '/images/veda36.jpg',
      alt: 'Veda1',
    },
    {
      id: 1,
      name: 'Veda',
      src: '/images/veda37.jpg',
      alt: 'Veda1',
    },
    {
      id: 1,
      name: 'Veda',
      src: '/images/veda38.jpg',
      alt: 'Veda1',
    },
    // More images...
  ],
  colors: [
    { name: 'Washed Black', bgColor: 'bg-gray-700', selectedColor: 'ring-gray-700' },
    { name: 'White', bgColor: 'bg-white', selectedColor: 'ring-gray-400' },
    { name: 'Washed Gray', bgColor: 'bg-gray-500', selectedColor: 'ring-gray-500' },
  ],
  description: `
    <p>VEDA III is a cozy 18-meter dahabiya that offers a serene floating home experience, perfect for smaller groups seeking tranquility and comfort on the Nile.</p>
    <p>VEDA III accommodates up to 10 guests across 5 rooms. The accommodations include 2 rooms with double beds and 3 rooms with two single beds, providing flexible sleeping arrangements. Each room is equipped with a private bathroom for convenience and privacy.</p>
    <p>Guests can enjoy breathtaking views of the Nile from the cozy upper deck, designed for relaxation and enjoyment. The upper deck provides an intimate space to unwind and take in the river's beauty.</p>
  `,
  details: [
    {
      name: 'FEATURES',
      items: [
      '5 Rooms: 2 rooms with double beds and 3 rooms with two single beds',
      'Hosts up to 10 people',
      'Private bathroom ensuites in each room',
      'Intimate upper deck with stunning Nile views',
      ],
    },
    // More sections...
  ],
}

function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

export default function Example() {
  const [selectedColor, setSelectedColor] = useState(product.colors[0])

  return (
    <div className="bg-creme-600">
      <div className="mx-auto max-w-2xl px-4 py-12 sm:px-6 lg:max-w-7xl lg:px-8">
        <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
          {/* Image gallery */}
          <TabGroup className="flex flex-col-reverse">
            {/* Image selector */}
            <div className="mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none">
              <TabList className="grid grid-cols-4 gap-6">
                {product.images.map((image) => (
                  <Tab
                    key={image.id}
                    className="group relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-white text-sm font-medium uppercase text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4"
                  >
                    <span className="sr-only">{image.name}</span>
                    <span className="absolute inset-0 overflow-hidden rounded-md">
                      <img alt="" src={image.src} className="h-full w-full object-cover object-center" />
                    </span>
                    <span
                      aria-hidden="true"
                      className="pointer-events-none absolute inset-0 rounded-md ring-2 ring-transparent ring-offset-2 group-data-[selected]:ring-indigo-500"
                    />
                  </Tab>
                ))}
              </TabList>
            </div>

            <TabPanels className="aspect-h-1 aspect-w-1 w-full">
              {product.images.map((image) => (
                <TabPanel key={image.id}>
                  <img
                    alt={image.alt}
                    src={image.src}
                    className="h-full w-full object-cover object-center sm:rounded-lg"
                  />
                </TabPanel>
              ))}
            </TabPanels>
          </TabGroup>

          {/* Product info */}
          <div className="mt-10 px-4 sm:mt-16 sm:px-0 lg:mt-0">
            <h1 className="text-3xl font-bold tracking-tight text-gray-900">{product.name}</h1>

            <div className="mt-3">
              <h2 className="sr-only">Product information</h2>
            </div>

            <div className="mt-6">
              <h3 className="sr-only">Description</h3>

              <div
                dangerouslySetInnerHTML={{ __html: product.description }}
                className="space-y-6 text-base text-gray-700"
              />
            </div>

            <section aria-labelledby="details-heading" className="mt-12">
              <h2 id="details-heading" className="sr-only">
                Additional details
              </h2>

              <div className="border-t border-gray-200 pt-6">
                <h3 className="text-lg font-medium text-gray-900">FEATURES</h3>
                <div className="mt-4">
                  <ul role="list" className="list-disc pl-5 space-y-2">
                    {product.details[0].items.map((item) => (
                      <li key={item} className="text-gray-700">
                        <span className="text-gray-900">{item}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
              <form className="mt-6">
              <div className="mt-10 flex">
                <button
                  type="submit"
                  className="flex max-w-xs flex-1 items-center justify-center rounded-md border border-transparent bg-gold-800 px-8 py-3 text-base font-medium text-white hover:bg-gold-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 sm:w-full"
                >
                  Book Now
                </button>
              </div>
            </form>
            </section>
          </div>
        </div>
      </div>
    </div>
  )
}