import { Program } from "@/types/models";
import { useTranslations } from "next-intl"
import { CheckCircle } from "lucide-react";

export function OverView({ program }: { program: Program }) {
    const t = useTranslations();
    const objectives = program?.cource_objective || [];
    const targetAudience = program?.target_audience || [];

    return (
        <div className="space-y-10">
 {/* description */}
            {program?.description && (
                <section>
                    <h2 className="text-3xl font-bold text-gray-900 mb-6">
                        {t("programs.description")}
                    </h2>
                    <p className="text-gray-600 leading-relaxed text-justify">
                        {program.description}
                    </p>
                </section>
            )}

            {/* objectives / requirements */}
            {objectives.length > 0 && (
                <section>
                    <h2 className="text-3xl font-bold text-gray-900 mb-6">
                        {t("programs.requirements")}
                    </h2>
                    <ul className="space-y-3">
                        {objectives.map((objective, index) => (
                            <li key={index} className="flex items-start gap-3">
                                <CheckCircle className="size-5 text-purple-600 flex-shrink-0 mt-0.5" />
                                <span className="text-gray-700 leading-relaxed">
                                    {typeof objective === 'string' ? objective : objective.title}
                                </span>
                            </li>
                        ))}
                    </ul>
                </section>
            )}

           
            {/* target audience */}
            {targetAudience.length > 0 && (
                <section>
                    <h2 className="text-3xl font-bold text-gray-900 mb-6">
                        {t("programs.target audience")}
                    </h2>
                    <ul className="space-y-3">
                        {targetAudience.map((audience, index) => (
                            <li key={index} className="flex items-start gap-3">
                                <CheckCircle className="size-5 text-purple-600 flex-shrink-0 mt-0.5" />
                                <span className="text-gray-700 leading-relaxed">
                                    {audience}
                                </span>
                            </li>
                        ))}
                    </ul>
                </section>
            )}
        </div>
    )
}