Composition vs Inheritance

import React from "react";

// 1. The Generic Shell Component (Containment)
function CardBox({ title, children, footerActions }) {
  return (
    <div className="border-2 rounded p-4 shadow-lg">
      <h2 className="border-b pb-2 mb-2">{title}</h2>
      
      {/* This is the main composition slot */}
      <div className="mb-4">
        {children}
      </div>

      {/* This is a custom prop slot for composition */}
      <div className="flex gap-2">
        {footerActions}
      </div>
    </div>
  );
}

// 2. The Specialized Component (Composing the shell)
export default function WelcomeDialog() {
  return (
    <CardBox 
      title="Welcome aboard!"
      footerActions={
        <>
          <button className="bg-blue-500 text-white px-2 rounded">Accept</button>
          <button className="text-gray-500">Cancel</button>
        </>
      }
    >
      {/* Everything here is passed as the implicit `children` prop */}
      <p>Thank you for signing up for our service.</p>
      <p>Please review the terms below.</p>
    </CardBox>
  );
}