'use client'

import { useState } from 'react'
import { PlusIcon } from 'lucide-react'
import Modal from './Modal'
import ListForm from './ListForm'

export default function NewListButton() {
  const [isModalOpen, setIsModalOpen] = useState(false)

  return (
    <>
      <button 
        onClick={() => setIsModalOpen(true)}
        className="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white px-4 sm:px-6 py-3 rounded-lg flex items-center gap-2 transition-colors tap-target shadow-sm hover:shadow-md text-sm sm:text-base font-medium"
      >
        <PlusIcon size={20} className="flex-shrink-0" />
        <span className="hidden xs:inline sm:inline">New List</span>
        <span className="xs:hidden sm:hidden">New</span>
      </button>

      <Modal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        title="Create New List"
      >
        <ListForm
          onCancel={() => setIsModalOpen(false)}
          onSuccess={() => setIsModalOpen(false)}
        />
      </Modal>
    </>
  )
}