import {
  ActionIcon,
  Button,
  createTheme,
  Input,
  Loader,
  Select,
  TextInput,
  type MantineLoaderComponent,
} from '@mantine/core';
import { MaritimeLoader } from '../components/MaritimeLoader';

/**
 * Registers the branded Ethiopian Maritime Authority loader as the default Mantine `Loader` type,
 * sets prominent 80px size for page/section loaders, and opts inline control loaders
 * (buttons, inputs, select fields) back out to the compact oval spinner.
 */
export const maritimeLoaderTheme = createTheme({
  components: {
    Loader: Loader.extend({
      defaultProps: {
        loaders: {
          ...Loader.defaultLoaders,
          maritime: MaritimeLoader as unknown as MantineLoaderComponent,
        },
        type: 'maritime',
        size: 80,
      },
    }),
    Button: Button.extend({
      defaultProps: { loaderProps: { type: 'oval' } },
    }),
    ActionIcon: ActionIcon.extend({
      defaultProps: { loaderProps: { type: 'oval' } },
    }),
    Input: Input.extend({
      defaultProps: { loaderProps: { type: 'oval' } },
    }),
    TextInput: TextInput.extend({
      defaultProps: { loaderProps: { type: 'oval' } },
    }),
    Select: Select.extend({
      defaultProps: { loaderProps: { type: 'oval' } },
    }),
  },
});

