import { ReactNode } from 'react';

type Props = {
  title: string;
  icon?: ReactNode;
  children: ReactNode;
};

function ProfileSection({ title, icon, children }: Props) {
  return (
    <div className="rounded-xl border bg-white p-4 shadow-sm">
      <h3 className="mb-4 flex items-center gap-2 text-sm font-semibold text-gray-700">
        {icon && <span className="text-gray-500">{icon}</span>}
        {title}
      </h3>

      {children}
    </div>
  );
}

export default ProfileSection;