import { h } from 'preact';
import type { AsukaModuleUiHelpers } from './modules';
import { Button, Card, CardContent, CardHeader, CardTitle, Field, FormWithHelpers, Input, Select, SegmentedControl, Tabs, Tooltip, List, Carousel, IconButton } from '../components/core';
import { Checkbox } from '../components/core/Checkbox';

const vanillaUiHelpers: AsukaModuleUiHelpers = {
  h,
  el: h,
  components: {
    Button,
    Card,
    CardContent,
    CardHeader,
    CardTitle,
    Field,
    Form: FormWithHelpers,
    FormWithHelpers,
    Input,
    Select,
    SegmentedControl,
    Tabs,
    Tooltip,
    List,
    Carousel,
    IconButton,
    Checkbox,
  },
  icon: (name: string, options: { size?: number; className?: string } = {}) =>
    h('span', {
      'aria-hidden': 'true',
      class: ['ask-icon', `ask-icon--${String(name || '').trim()}`, options.className].filter(Boolean).join(' '),
      style: `width:${options.size ?? 14}px;height:${options.size ?? 14}px;font-size:${options.size ?? 14}px;`,
    }),
};

export function getVanillaUiHelpers(): AsukaModuleUiHelpers {
  return vanillaUiHelpers;
}
