/**
 * DatePicker widget component with Nordic styling.
 *
 * ⚠️ AUTO-GENERATED BY PRISM - DO NOT EDIT
 */

import type { WidgetBaseProps } from '../types';

interface DatePickerProps extends WidgetBaseProps<string> {
  includeTime?: boolean;
}

export function DatePicker({
  name,
  value,
  onChange,
  label,
  description,
  placeholder,
  required,
  disabled,
  error,
  className,
  includeTime = false,
}: DatePickerProps): JSX.Element {
  // Format value for input
  const inputValue = value ? value.slice(0, includeTime ? 16 : 10) : '';

  return (
    <div className={className}>
      {label && (
        <label htmlFor={name} className="label">
          {label}
          {required && <span className="text-red-500 ml-1">*</span>}
        </label>
      )}
      <input
        id={name}
        type={includeTime ? 'datetime-local' : 'date'}
        name={name}
        value={inputValue}
        onChange={(e) => {
          const val = e.target.value;
          if (val) {
            if (includeTime) {
              // For datetime, convert to full ISO string
              const date = new Date(val);
              onChange(date.toISOString());
            } else {
              // For date-only, send just the date portion (YYYY-MM-DD)
              onChange(val);
            }
          } else {
            onChange('');
          }
        }}
        placeholder={placeholder}
        disabled={disabled}
        required={required}
        className={error ? 'input-error' : 'input'}
        aria-invalid={!!error}
        aria-describedby={description ? `${name}-desc` : error ? `${name}-error` : undefined}
      />
      {description && !error && (
        <p id={`${name}-desc`} className="mt-1.5 text-sm text-nordic-500">{description}</p>
      )}
      {error && (
        <p id={`${name}-error`} className="mt-1.5 text-sm text-red-600">
          {error}
        </p>
      )}
    </div>
  );
}
