import { SectionHeading } from "@/components/ui/section-heading"
import { ComponentContainer } from "@/components/ui/component-container"
import { FeatureCard } from "@/components/blocks/feature-card-block"
import { IoBulb, IoFlash, IoShield, IoHeart } from "react-icons/io5"

export function FeatureCardSection() {
  return (
    <div className="space-y-6">
      <SectionHeading
        title="Feature Card"
        description="A card component for showcasing features with an icon, title, and description."
      />

      <ComponentContainer className="grid grid-cols-1 md:grid-cols-2 gap-4" title="">
        <FeatureCard
          icon={<IoBulb className="h-6 w-6" />}
          title="Smart Features"
          description="Intelligent automation and suggestions based on your usage patterns."
        />
        <FeatureCard
          icon={<IoFlash className="h-6 w-6" />}
          title="Lightning Fast"
          description="Optimized performance ensures your workflow is never interrupted."
        />
        <FeatureCard
          icon={<IoShield className="h-6 w-6" />}
          title="Secure by Default"
          description="Enterprise-grade security with end-to-end encryption for all your data."
        />
        <FeatureCard
          icon={<IoHeart className="h-6 w-6" />}
          title="Designed for You"
          description="Customizable interface that adapts to your preferences and needs."
        />
      </ComponentContainer>
    </div>
  )
}