const ShadowCard = ({ children = 'Default' }) => (
  <div className="p-12 bg-gradient-to-br from-gray-50 to-white min-h-[240px] flex items-center justify-center">
    <div className="shadow px-10 py-8 text-center">
      <p className="text-body-lg text-gray-700">{children}</p>
    </div>
  </div>
);

export default {
  title: 'Atoms/Shadows',
};

export const Default = {
  render: () => (
    <div className="max-w-lg mx-auto space-y-4">
      <ShadowCard>Shadow Default</ShadowCard>
      <div className="text-center">
        <code className="text-emerald-600 text-sm">.shadow</code>
        <p className="text-gray-500 text-sm mt-1">Box shadow oficial del sistema</p>
      </div>
    </div>
  ),
};


