import React from 'react';
import { CardStack } from '@/components/cardStack/CardStack';

interface FeatureHoverPatternProps {
  features: Array<{
    id: string;
    title: string;
    description: string;
  }>;
  title: string;
  description: string;
  animationType?: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
  textboxLayout?: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
  [key: string]: any;
}

const FeatureHoverPattern: React.FC<FeatureHoverPatternProps> = ({
  features,
  title,
  description,
  animationType = 'slide-up',
  textboxLayout = 'default',
  ...props
}) => {
  const featureItems = features.map((feature) => (
    <div key={feature.id} className="flex flex-col gap-4">
      <h3 className="text-xl font-semibold">{feature.title}</h3>
      <p className="text-sm text-foreground/75">{feature.description}</p>
    </div>
  ));

  return (
    <CardStack
      gridVariant="uniform-all-items-equal"
      animationType={animationType}
      title={title}
      description={description}
      textboxLayout={textboxLayout}
      {...props}
    >
      {featureItems}
    </CardStack>
  );
};

export default FeatureHoverPattern;