import React from 'react';

const RoomCardSkeleton: React.FC = () => {
  return (
    <div 
      className="bg-gradient-to-br from-[#1a1a1a] to-[#0a0a0a] 
        rounded-xl border border-[var(--luxury-gold)]/20 
        overflow-hidden animate-pulse shadow-lg shadow-[var(--luxury-gold)]/5"
    >
      {}
      <div className="h-40 sm:h-44 md:h-48 lg:h-52 bg-gradient-to-br from-gray-800 to-gray-900" />

      {}
      <div className="p-4 sm:p-5">
        {}
        <div className="h-5 sm:h-6 bg-gray-800 rounded w-3/4 mb-2" />

        {}
        <div className="h-3 sm:h-4 bg-gray-800 rounded w-1/2 mb-2" />

        {}
        <div className="space-y-1.5 mb-3">
          <div className="h-3 bg-gray-800 rounded w-full" />
          <div className="h-3 bg-gray-800 rounded w-5/6" />
        </div>

        {}
        <div className="flex items-center justify-between mb-3">
          <div className="h-3 sm:h-4 bg-gray-800 rounded w-20" />
          <div className="h-3 sm:h-4 bg-gray-800 rounded w-16" />
        </div>

        {}
        <div className="flex gap-1.5 sm:gap-2 mb-3 sm:mb-4">
          <div className="h-5 sm:h-6 bg-gray-800 rounded w-14 sm:w-16" />
          <div className="h-5 sm:h-6 bg-gray-800 rounded w-14 sm:w-16" />
          <div className="h-5 sm:h-6 bg-gray-800 rounded w-14 sm:w-16" />
        </div>

        {}
        <div 
          className="flex items-center justify-between 
            pt-3 border-t border-[var(--luxury-gold)]/20"
        >
          <div>
            <div className="h-3 bg-gray-800 rounded w-12 mb-1" />
            <div className="h-5 sm:h-6 bg-gray-800 rounded w-20 sm:w-24 mb-1" />
            <div className="h-3 bg-gray-800 rounded w-10" />
          </div>
          <div className="h-8 sm:h-9 bg-gray-800 rounded w-24 sm:w-28" />
        </div>
      </div>
    </div>
  );
};

export default RoomCardSkeleton;
