export const Divider = ({
  orientation = 'horizontal',
  variant = 'solid',
  spacing = 'medium',
  label,
  className = '',
  ...props
}) => {
  const variantClasses = {
    solid: 'border-solid',
    dashed: 'border-dashed',
    dotted: 'border-dotted',
  };

  const spacingClasses = {
    small: orientation === 'horizontal' ? 'my-2' : 'mx-2',
    medium: orientation === 'horizontal' ? 'my-4' : 'mx-4',
    large: orientation === 'horizontal' ? 'my-6' : 'mx-6',
  };

  if (orientation === 'vertical') {
    return (
      <div
        className={`border-l border-gray-300 ${variantClasses[variant]} ${spacingClasses[spacing]} ${className}`}
        {...props}
      />
    );
  }

  if (label) {
    return (
      <div className={`flex items-center ${spacingClasses[spacing]} ${className}`} {...props}>
        <div className={`flex-1 border-t border-gray-300 ${variantClasses[variant]}`} />
        <span className="px-4 text-sm text-gray-500">{label}</span>
        <div className={`flex-1 border-t border-gray-300 ${variantClasses[variant]}`} />
      </div>
    );
  }

  return (
    <hr
      className={`border-0 border-t border-gray-300 ${variantClasses[variant]} ${spacingClasses[spacing]} ${className}`}
      {...props}
    />
  );
};

export default Divider;

