import { Activity, ArrowRight, Calendar, Users } from 'lucide-react';
 
interface Feature {
    id: number;
    title: string;
    excerpt: string;
    href: string;
    icon: React.ReactElement;
}
 
const features: Feature[] = [
    {
        id: 1,
        title: 'Event Scheduling',
        excerpt: 'Sed eu quam id quam tristique phar etra ait tortor lorem. Suspendisse vel odio sit amet libero facilisis cillum.',
        href: '#',
        icon: <Calendar />,
    },
    {
        id: 2,
        title: 'Coaching Tools',
        excerpt: 'Sed eu quam id quam tristique phar etra ait tortor lorem. Suspendisse vel odio sit amet libero facilisis cillum.',
        href: '#',
        icon: <Users />,
    },
    {
        id: 3,
        title: 'Performance Analytics',
        excerpt: 'Sed eu quam id quam tristique phar etra ait tortor lorem. Suspendisse vel odio sit amet libero facilisis cillum.',
        href: '#',
        icon: <Activity />,
    },
];
 
export default function FeatureSection() {
    return (
        <section className="py-16 lg:py-32">
            <div className="mx-auto w-full max-w-2xl px-6 lg:max-w-7xl">
                <div className="mx-auto max-w-xl text-center">
                    <h2 className="text-3xl/tight font-semibold tracking-tight sm:text-4xl/tight">What We Offer</h2>
                    <p className="text-muted-foreground mt-4 text-base/7 sm:text-lg/8">
                        Aliquet adipiscing lectus praesent cras sed quis lectus egestas.
                    </p>
                </div>
                <div className="mt-6 grid gap-6 lg:mt-12 lg:grid-cols-3 lg:gap-12">
                    {features.map((feature: Feature) => {
                        return (
                            <div key={feature.id} className="flex flex-1 flex-col items-center p-6 text-center">
                                <div className="bg-primary text-primary-foreground inline-flex size-11 items-center justify-center rounded-md shadow-sm [&_svg]:size-4">
                                    {feature.icon}
                                </div>
                                <div className="mt-4 flex-1">
                                    <h3 className="mt-2 text-lg font-semibold tracking-tight">{feature.title}</h3>
                                    <p className="text-muted-foreground mt-2 max-w-sm text-sm/6">{feature.excerpt}</p>
                                </div>
                                <a
                                    href={feature.href}
                                    className="text-primary mt-6 inline-flex items-center gap-2 text-sm font-medium transition-opacity hover:opacity-85"
                                >
                                    Learn More <ArrowRight className="size-4" />
                                </a>
                            </div>
                        );
                    })}
                </div>
            </div>
        </section>
    );
}