import { defineComponent, h } from 'vue';

export default defineComponent({
  name: 'Button',
  props: {
    type: {
      type: String,
      default: 'button',
    },
    variant: {
      type: String,
      default: 'default',
      validator: (value: string) => ['default', 'outline', 'ghost'].includes(value),
    },
    className: {
      type: String,
      default: '',
    },
  },
  setup(props, { slots }) {
    const base = 'inline-flex items-center justify-center rounded-md px-4 py-2 font-medium transition';
    const styles: Record<string, string> = {
      default: 'bg-cyan-500 text-black hover:bg-cyan-400',
      outline: 'border border-slate-600 text-slate-100 bg-transparent hover:bg-slate-900',
      ghost: 'text-slate-100 hover:bg-slate-800',
    };

    return () =>
      h(
        'button',
        {
          type: props.type as 'button' | 'submit' | 'reset',
          class: `${base} ${styles[props.variant as keyof typeof styles]} ${props.className}`.trim(),
        },
        slots.default ? slots.default() : undefined,
      );
  },
});

export { Button };