lti-web-client/src/components/helper/drawer/DrawerHeader.tsx

'use client';

import { Icon } from '@iconify/react';
import Link from 'next/link';
import { ReactNode } from 'react';
import { cn } from '@/lib/helper';

export interface DrawerHeaderProps {
  // Left side props
  leftIcon?: string;
  leftIconSize?: number;
  leftIconHref?: string;
  leftIconOnClick?: () => void;
  leftIconClassName?: string;

  // Subtitle/label props
  subtitle?: string | ReactNode;
  subtitleClassName?: string;

  // Right side actions (children)
  children?: ReactNode;

  // Container props
  className?: string;
  showDivider?: boolean;
}

const DrawerHeader = ({
  leftIcon = 'mdi:close',
  leftIconSize = 24,
  leftIconHref,
  leftIconOnClick,
  leftIconClassName,
  subtitle,
  subtitleClassName,
  children,
  className,
  showDivider = true,
}: DrawerHeaderProps) => {
  const renderLeftIcon = () => {
    const iconElement = (
      <Icon
        icon={leftIcon}
        width={leftIconSize}
        height={leftIconSize}
        className={cn('cursor-pointer', leftIconClassName)}
      />
    );

    if (leftIconHref) {
      return (
        <Link href={leftIconHref} className='hover:text-gray-400'>
          {iconElement}
        </Link>
      );
    }

    if (leftIconOnClick) {
      return (
        <button
          type='button'
          onClick={leftIconOnClick}
          className='hover:text-gray-400 bg-transparent border-none p-0'
        >
          {iconElement}
        </button>
      );
    }

    return iconElement;
  };

  return (
    <div
      className={cn(
        'flex flex-row justify-between items-center px-4 pt-4 pb-4 border-b border-base-content/10',
        className
      )}
    >
      {/* Left Side */}
      <div className='flex flex-row h-full gap-3 items-center'>
        {renderLeftIcon()}

        {showDivider && subtitle && (
          <div className='divider divider-horizontal p-0 m-0'></div>
        )}

        {subtitle && (
          <div
            className={cn(
              'text-sm font-medium text-base-content/50',
              subtitleClassName
            )}
          >
            {subtitle}
          </div>
        )}
      </div>

      {/* Right Side Actions */}
      {children && (
        <div className='flex flex-row gap-3 justify-end items-center'>
          {children}
        </div>
      )}
    </div>
  );
};

export default DrawerHeader;