import { JSX, Show } from 'solid-js';
import { GripVertical } from 'lucide-solid';
import { CARD } from '~/components/DashboardShell';

export type WidgetSize = 'small' | 'large';

type Props = {
  title: string;
  loading?: boolean;
  error?: string;
  action?: JSX.Element;
  size?: WidgetSize;
  icon?: JSX.Element;
  children: JSX.Element;
};

export default function DashboardWidget(props: Props) {
  return (
    <div style={{ ...CARD, padding: '0', overflow: 'hidden', display: 'flex', 'flex-direction': 'column', 'min-height': '180px', height: '180px' }}>
      <div
        style={{
          display: 'flex',
          'align-items': 'center',
          'justify-content': 'space-between',
          padding: '12px 14px',
          'border-bottom': '1px solid #F3F4F6',
          'flex-shrink': 0,
        }}
      >
        <div style={{ display: 'flex', 'align-items': 'center', gap: '8px' }}>
          <span style={{ color: '#FF5E13', 'flex-shrink': 0, cursor: 'grab' }}>
            <GripVertical size={14} />
          </span>
          <Show when={props.icon}>
            <span style={{ color: '#FF5E13', 'flex-shrink': 0 }}>{props.icon}</span>
          </Show>
          <p
            style={{
              margin: '0',
              'font-size': '13px',
              'font-weight': '700',
              color: '#374151',
            }}
          >
            {props.title}
          </p>
        </div>
        <Show when={props.action}>{props.action}</Show>
      </div>

      <div style={{ padding: props.size === 'large' ? '16px 14px' : '12px 14px', flex: 1, display: 'flex', 'flex-direction': 'column', 'justify-content': 'center' }}>
        <Show when={props.loading}>
          <div
            style={{
              display: 'flex',
              'align-items': 'center',
              'justify-content': 'center',
              height: '80px',
            }}
          >
            <span style={{ 'font-size': '12px', color: '#9CA3AF' }}>Loading...</span>
          </div>
        </Show>

        <Show when={!props.loading && props.error}>
          <div
            style={{
              padding: '8px 10px',
              background: '#FEF2F2',
              border: '1px solid #FECACA',
              'border-radius': '8px',
              'font-size': '12px',
              color: '#B91C1C',
            }}
          >
            {props.error}
          </div>
        </Show>

        <Show when={!props.loading && !props.error}>{props.children}</Show>
      </div>
    </div>
  );
}
