// app/components/admin/CommonComponents/SocialLinkField.tsx
'use client';

import React from 'react';

interface SocialLinkFieldProps {
  id: string;
  name: string;
  label: string;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  placeholder?: string;
  icon: React.ReactNode;
  disabled?: boolean;
  className?: string;
}

export default function SocialLinkField({
  id,
  name,
  label,
  value,
  onChange,
  placeholder,
  icon,
  disabled = false,
  className = '',
}: SocialLinkFieldProps) {
  return (
    <div className={className}>
      <label htmlFor={id} className="block text-sm font-medium text-var-text mb-2">
        {label}
      </label>
      <div className="relative">
        <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-var-text-muted">
          {icon}
        </div>
        <input
          type="url"
          id={id}
          name={name}
          value={value}
          onChange={onChange}
          placeholder={placeholder}
          disabled={disabled}
          className="w-full pl-10 pr-3 py-2 border border-var-border rounded-xl focus:ring-2 focus:ring-var-primary focus:border-var-primary bg-var-input text-var-text placeholder-var-text-muted transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
        />
      </div>
    </div>
  );
}