import { defineComponent, h } from 'vue';

export const CustomLayout = defineComponent({
  name: 'CustomLayout',
  props: { title: String },
  setup(props, { slots }) {
    return () => h('div', {
      style: {
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        borderRadius: '12px',
        padding: '20px',
        color: '#fff',
      },
    }, [
      props.title && h('h3', {
        style: { margin: '0 0 16px 0', fontSize: '18px' },
      }, props.title),
      h('div', {
        style: {
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          gap: '12px',
        },
      }, slots.default?.()),
    ]);
  },
});