import React from 'react';
import Button from './Button'; // Import the Button component

// Define a basic interface for a service offer, exported for potential use elsewhere
export interface ServiceOffer {
  id: string;
  title: string;
  description: string;
  price?: string;
  imageUrl?: string; 
  imageAlt?: string;
  actionText?: string; 
  onAction?: (id: string) => void;
  themeColor?: 'purple' | 'blue' | 'teal' | 'amber'; // Optional theme color
}

interface ServiceOfferCardProps {
  offer: ServiceOffer;
}

const ServiceOfferCard: React.FC<ServiceOfferCardProps> = ({ offer }) => {
  const handleActionClick = () => {
    if (offer.onAction) {
      offer.onAction(offer.id);
    }
  };

  return (
    <div 
      className="bg-white rounded-xl transition-all duration-300 ease-in-out overflow-hidden flex flex-col h-full group"
      role="article"
      aria-labelledby={`offer-title-${offer.id}`}
    >
      {offer.imageUrl && (
        <div className="w-full h-48 sm:h-56 bg-slate-200 overflow-hidden">
          <img 
            src={offer.imageUrl} 
            alt={offer.imageAlt || `Visual for ${offer.title}`} 
            className="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-300" 
            loading="lazy" 
          />
        </div>
      )}
      <div className="p-5 md:p-6 flex flex-col flex-grow">
        <h3 
          id={`offer-title-${offer.id}`} 
          className={`font-quicksand text-xl sm:text-2xl font-bold text-slate-900 mb-2 group-hover:text-black transition-colors`}
        >
          {offer.title}
        </h3>
        <p className="font-inter text-slate-600 text-sm leading-relaxed mb-4 flex-grow">
          {offer.description}
        </p>
        
        <div className="flex flex-wrap items-center justify-between mt-auto">
          {offer.price && (
            <p className={`font-quicksand text-xl font-bold text-slate-700 mb-3 sm:mb-0`}>
              {offer.price}
            </p>
          )}
          {offer.actionText && offer.onAction && (
            <Button
              variant="outline"
              size="md"
              onClick={handleActionClick}
              className={`${!offer.price ? 'ml-auto' : ''}`}
              aria-label={`${offer.actionText} for ${offer.title}`}
            >
              {offer.actionText}
            </Button>
          )}
        </div>
      </div>
    </div>
  );
};

export default ServiceOfferCard;