'use client';
import React from "react";
import { FeatureCard as FeatureCardType } from '@/lib/page-builder/types';
import * as Icons from 'react-icons/fi';

interface FeatureCardProps {
  feature: FeatureCardType;
}

export default function FeatureCard({ feature }: FeatureCardProps) {
  // Function to get icon component by name
  const getIconComponent = (iconName: string) => {
    const IconComponent = Icons[iconName as keyof typeof Icons];
    return IconComponent || Icons.FiStar; // Fallback icon
  };

  const IconComponent = getIconComponent(feature.icon);

  return (
    <div className="bg-black/20 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-custom-1/50 hover:bg-black/30 transition-all duration-300 hover:-translate-y-1 text-center shadow-lg shadow-black/20">
      <div className="w-16 h-16 bg-custom-2/10 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-custom-1/20 transition-colors">
        <IconComponent className="w-6 h-6 text-custom-1" />
      </div>
      <h3 className="font-semibold text-custom-2 mb-3">{feature.title}</h3>
      <p className="text-custom-2/70 text-sm leading-relaxed">{feature.description}</p>
    </div>
  );
}