'use client'

import { useState } from 'react'
import { useMedusaProducts } from '@/hooks/useMedusaProducts'
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/Card'
import Button from '@/components/ui/Button'
import { BedDouble, Snowflake, Tv, Wifi } from 'lucide-react'
import Image from 'next/image'

export default function ThemedSuitesSection() {
  const { products: suites, isLoading } = useMedusaProducts(6)
  if (isLoading) return null

  const fallbackImage = 'https://images.pexels.com/photos/12961892/pexels-photo-12961892.jpeg?auto=compress&cs=tinysrgb&h=350'
  const amenities = ['Air-conditioning', 'En-suite bathroom', 'DStv', 'Free WiFi', 'Tea & Coffee']

  return (
    <section data-vula-section="themedsuites" id="themed-suites" className="py-16 md:py-24 bg-muted">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-2">
            Themed Luxury Suites
          </h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            Each room tells a story &mdash; African royalty &amp; nature inspire every detail
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {suites.map((suite) => {
            const price = suite.variants?.[0]?.prices?.[0]
            const formattedPrice = price
              ? `R${(price.amount / 100).toFixed(0)}`
              : 'From R950'
            const imgUrl = suite.thumbnail || fallbackImage

            return (
              <Card key={suite.id} className="hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out">
                <CardHeader className="p-0 overflow-hidden rounded-t-xl">
                  <div className="aspect-video relative">
                    <Image
                      src={imgUrl}
                      alt={suite.title || 'Suite'}
                      fill
                      sizes="(max-width: 768px) 100vw, 33vw"
                      className="object-cover"
                    />
                  </div>
                </CardHeader>
                <CardContent className="pt-4">
                  <CardTitle className="text-xl font-bold mb-2">{suite.title}</CardTitle>
                  <p className="text-muted-foreground text-sm line-clamp-2 mb-3">
                    {suite.description || 'Experience bespoke luxury in this uniquely themed room.'}
                  </p>
                  <div className="flex flex-wrap gap-2 mb-3">
                    {amenities.slice(0, 3).map((a) => (
                      <span key={a} className="inline-flex items-center gap-1 text-xs bg-[#d4af37]/10 text-[#8b5a3c] px-2 py-1 rounded-full">
                        <BedDouble className="w-3 h-3" />
                        {a}
                      </span>
                    ))}
                  </div>
                  <p className="text-lg font-semibold text-[#d4af37]">{formattedPrice}<span className="text-sm text-muted-foreground font-normal"> / night</span></p>
                </CardContent>
                <CardFooter className="pt-0">
                  <a href={`/booking/${suite.id}`} className="block w-full">
                    <Button variant="default" className="w-full">
                      Book Now
                    </Button>
                  </a>
                </CardFooter>
              </Card>
            )
          })}
        </div>

        <div className="text-center mt-8">
          <a href="/booking" className="inline-block border-2 border-[#d4af37] text-[#d4af37] font-semibold px-8 py-3 rounded-lg hover:bg-[#d4af37] hover:text-white transition-all duration-200">
            View All Suites &amp; Availability
          </a>
        </div>
      </div>
    </section>
  )
}