'use client';

import { Smartphone, Sparkles } from 'lucide-react';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

interface NewItemDialogProps {
  onScannerClick: () => void;
  onAddItemClick: () => void;
}

export default function NewItemDialog({ onScannerClick, onAddItemClick }: NewItemDialogProps) {
  return (
    <div className="flex flex-col items-center py-3 md:py-4 text-center gap-3 md:gap-4">
      <button
        onClick={onScannerClick}
        className="w-24 h-24 rounded-full bg-primary/20 hover:bg-primary/30 border-2 border-primary border-dashed flex items-center justify-center group transition-all"
      >
        <Smartphone className="w-10 h-10 text-primary group-hover:scale-110 transition-transform" />
      </button>

      <div className="w-full flex justify-center">
        <button
          onClick={onAddItemClick}
          className="w-full flex flex-col items-center justify-center p-4 md:p-6 rounded-[2rem] bg-indigo-500/5 border border-indigo-500/20 group hover:border-indigo-500/50 transition-all font-normal text-indigo-400 gap-2 md:gap-3"
        >
          <div className="p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-indigo-500/10 rounded-2xl group-hover:scale-110 transition-transform shadow-lg shadow-indigo-500/10">
            <Sparkles size={32} />
          </div>
          <div className="text-center">
            <p className="text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl leading-tight">Add New Item</p>
            <p className="text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl opacity-60 font-mono mt-1">AI Smart Discovery</p>
          </div>
        </button>
      </div>
    </div>
  );
}