Todo/components/ListHeader.tsx

'use client'

import { useState } from 'react'
import Link from 'next/link'
import { ArrowLeft, Share2 } from 'lucide-react'
import PermissionBadge from './PermissionBadge'
import ShareListModal from './ShareListModal'

interface ListHeaderProps {
  listId: string
  listTitle: string
  listColor: string
  completedCount: number
  totalCount: number
  permission: 'owner' | 'editor' | 'viewer'
  canShare: boolean
  ownerId: string
  ownerName: string | null | undefined
  ownerEmail: string
  collaborators: Array<{
    id: string
    permission: 'editor' | 'viewer'
    user: {
      id: string
      name: string | null
      email: string
    }
  }>
}

export default function ListHeader({
  listId,
  listTitle,
  listColor,
  completedCount,
  totalCount,
  permission,
  canShare,
  ownerId,
  ownerName,
  ownerEmail,
  collaborators
}: ListHeaderProps) {
  const [isShareModalOpen, setIsShareModalOpen] = useState(false)

  return (
    <>
      <div className="mb-6 sm:mb-8">
        <Link 
          href="/" 
          className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900 active:text-black mb-4 transition-colors tap-target-sm text-sm sm:text-base"
        >
          <ArrowLeft size={20} className="flex-shrink-0" />
          <span>Back to Lists</span>
        </Link>
        
        <div className="flex items-center justify-between gap-3 mb-2">
          <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
            <div 
              className="w-5 h-5 sm:w-6 sm:h-6 rounded-full flex-shrink-0" 
              style={{ backgroundColor: listColor }}
            />
            <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 truncate">{listTitle}</h1>
          </div>
          
          <div className="flex items-center gap-2 flex-shrink-0">
            <PermissionBadge permission={permission} />
            {canShare && (
              <button
                onClick={() => setIsShareModalOpen(true)}
                className="flex items-center gap-2 px-3 py-1.5 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors text-sm font-medium"
              >
                <Share2 size={16} />
                <span className="hidden sm:inline">Share</span>
              </button>
            )}
          </div>
        </div>
        
        <p className="text-gray-600 text-sm sm:text-base">
          {completedCount} of {totalCount} tasks completed
        </p>
      </div>

      <ShareListModal
        isOpen={isShareModalOpen}
        onClose={() => setIsShareModalOpen(false)}
        listId={listId}
        listTitle={listTitle}
        isOwner={permission === 'owner'}
        ownerId={ownerId}
        ownerName={ownerName}
        ownerEmail={ownerEmail}
        initialCollaborators={collaborators}
      />
    </>
  )
}