oms-website-nextjs/app/(website)/vacancies/_components/ListSection.tsx

import { COLORS } from "@/constants";

export const ListSection = ({
  title,
  items,
  icon: Icon,
}: {
  title: string;
  items?: string[];
  icon?: React.ElementType;
}) => {
  if (!items || items.length === 0) return null;
  return (
    <div className="mb-8">
      <h3 className="flex items-center gap-2 text-xl font-semibold mb-3 text-gray-900 dark:text-white font-poppins border-b border-gray-200 pb-2">
        {Icon && (
          <Icon
            className="h-5 w-5 text-primary"
            style={{ color: COLORS.primary }}
          />
        )}
        {title}
      </h3>
      <ul className="list-disc space-y-2 pl-6 text-gray-700 dark:text-white font-poppins text-sm leading-relaxed">
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};