import {LucideIcon, Shield, CalendarDays, BrainCircuit, BookType, FileVideo} from "lucide-react";


interface Service {
    icon: any;
    title: string;
    description: string;
}


const servicesOffered: Service[] = [
    {
        icon: <BookType size={32} className={"text-primary"}/>,
        title: "Professional Counseling",
        description: "Connect with licensed counselors and therapists via text, or audio chat."
    },
    {
        icon: <Shield size={32} className={"text-primary"}/>,
        title: "Confidential & Secure",
        description: "Our platform is end to end encrypted and complies with all privacy regulations to ensure your personal information is secure. Patients remain anonymous throughout."
    },
    {
        icon: <BrainCircuit size={32} className={"text-primary"}/>,
        title: "Personalized Matching",
        description: "Answer a few questions to help us match you with the most suitable therapist for your needs."
    },
    {
        icon: <CalendarDays size={32} className={"text-primary"}/>,
        title: "Scheduling & Reminders",
        description: "Schedule appointments and receive reminders to stay on top of your mental health care."
    },
    {
        icon: <FileVideo size={32} className={"text-primary"}/>,
        title: "In-App Resources",
        description: "Access helpful articles, exercises, and self-care tips to support your mental wellbeing."
    }
]


function ServicesOffers() {
    return (
        <div className={"mt-4 md:mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-4 space-2 md:space-4"}>
            {
                servicesOffered.map((service, index) => {
                    return (
                        <div key={index} className={"flex flex-col gap-2 md:gap-3 text-center border border-gray-300 rounded-lg p-6 hover:bg-green-100 group"}>
                            <div className={"flex flex-col self-center border border-gray-300 p-4 rounded-full"}>
                                {service.icon}
                            </div>
                            <p className={"text-lg lg:text-xl font-bold text-green-950 "}>{service.title}</p>
                            <p className={"text-sm md:text-base lg:text-lg text-gray-600 dark:text-gray-300"}>{service.description}</p>
                        </div>
                    );
                })
            }
        </div>
    )
}


export default ServicesOffers;