'use client';

/**
 * 서명/도장 영역 컴포넌트
 *
 * @example
 * // 기본 사용 (도장 영역 포함)
 * <SignatureSection
 *   date="2025년 01월 22일"
 *   companyName="경동기업"
 *   showStamp={true}
 * />
 *
 * // 커스텀 문구
 * <SignatureSection
 *   label="상기와 같이 견적합니다."
 *   date="2025년 01월 22일"
 *   companyName="경동기업"
 *   role="공급자"
 * />
 */

import { cn } from '@/lib/utils';

export interface SignatureSectionProps {
  /** 상단 안내 문구 (기본값: '상기와 같이 견적합니다.') */
  label?: string;
  /** 날짜 */
  date?: string;
  /** 회사명 */
  companyName?: string;
  /** 역할 라벨 (기본값: '공급자') */
  role?: string;
  /** 도장 영역 표시 여부 */
  showStamp?: boolean;
  /** 도장 내부 텍스트 */
  stampText?: string;
  /** 도장 이미지 URL */
  stampImageUrl?: string;
  /** 정렬 (기본값: 'right') */
  align?: 'left' | 'center' | 'right';
  /** 추가 className */
  className?: string;
}

export function SignatureSection({
  label = '상기와 같이 견적합니다.',
  date,
  companyName,
  role = '공급자',
  showStamp = true,
  stampText = '(인감\n날인)',
  stampImageUrl,
  align = 'right',
  className,
}: SignatureSectionProps) {
  const alignClass = {
    left: 'text-left',
    center: 'text-center',
    right: 'text-right',
  }[align];

  return (
    <div className={cn('mt-8', alignClass, className)}>
      <div className="inline-block text-left">
        {/* 안내 문구 */}
        {label && (
          <div className="mb-4 text-sm">
            {label}
          </div>
        )}

        {/* 날짜 + 회사명 + 도장 */}
        <div className="flex items-center gap-5">
          <div>
            {date && (
              <div className="text-sm mb-1">{date}</div>
            )}
            {companyName && (
              <div className="text-base font-semibold">
                {role}: {companyName} (인)
              </div>
            )}
          </div>

          {/* 도장 영역 */}
          {showStamp && (
            <div className="border-2 border-black w-20 h-20 relative inline-block ml-5">
              {stampImageUrl ? (
                <img
                  src={stampImageUrl}
                  alt="도장"
                  className="w-full h-full object-contain"
                />
              ) : (
                <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-[10px] text-gray-400 text-center whitespace-pre-line leading-tight">
                  {stampText}
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
