import React from 'react';
import clsx from 'clsx';

/**
 * PncyssD Design System Input
 * Supports standard input, select, and textarea with consistent glassmorphism styling.
 */

const baseStyles = "w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-gray-100 placeholder-gray-500 focus:outline-none focus:border-primary/50 focus:ring-1 focus:ring-primary/50 focus:bg-white/10 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed backdrop-blur-sm";
const errorStyles = "border-red-500/50 focus:border-red-500 focus:ring-red-500/50 bg-red-500/5";

export const Input = React.forwardRef(({ className, error, ...props }, ref) => {
  return (
    <input
      ref={ref}
      className={clsx(baseStyles, error && errorStyles, className)}
      {...props}
    />
  );
});

export const Select = React.forwardRef(({ className, children, error, ...props }, ref) => {
  return (
    <div className="relative">
      <select
        ref={ref}
        className={clsx(baseStyles, "appearance-none pr-10", error && errorStyles, className)}
        {...props}
      >
        {children}
      </select>
      <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
      </div>
    </div>
  );
});

export const Textarea = React.forwardRef(({ className, error, ...props }, ref) => {
  return (
    <textarea
      ref={ref}
      className={clsx(baseStyles, "resize-none min-h-[100px]", error && errorStyles, className)}
      {...props}
    />
  );
});