import type { LucideIcon } from "lucide-react";
import type { ReactNode } from "react";
import { Button } from "~/components/ui/button";
import { GradientIcon } from "~/components/ui/GradientIcon";

export interface ReviewSectionProps {
  icon: LucideIcon;
  title: string;
  onEdit: () => void;
  children: ReactNode;
}

export function ReviewSection({ icon, title, onEdit, children }: ReviewSectionProps) {
  return (
    <div className="rounded-lg border border-border p-4 space-y-3">
      <div className="flex items-center justify-between">
        <h3 className="text-sm font-semibold flex items-center gap-2">
          <GradientIcon icon={icon} className="h-4 w-4" />
          {title}
        </h3>
        <Button type="button" variant="outline" size="sm" onClick={onEdit} className="h-7 text-xs px-3">
          Edit
        </Button>
      </div>
      {children}
    </div>
  );
}