import { Sparkles, Send } from "lucide-react";

interface WelcomeScreenProps {
  selectedChatId: string | null;
  hasMessages: boolean;
}

export default function WelcomeScreen({
  selectedChatId,
  hasMessages,
}: WelcomeScreenProps) {
  if (selectedChatId === null) {
    return (
      <div className="flex-1 flex items-center justify-center p-4">
        <div className="text-center space-y-6 p-4 sm:p-8 max-w-md mx-auto">
          <div className="w-16 h-16 sm:w-20 sm:h-20 mx-auto bg-gradient-to-br from-primary/20 to-primary/5 rounded-2xl flex items-center justify-center">
            <Sparkles className="h-8 w-8 sm:h-10 sm:w-10 text-primary" />
          </div>
          <div className="space-y-2">
            <h2 className="text-xl sm:text-2xl font-semibold tracking-tight">
              Welcome to Transcriptinator 6000
            </h2>
            <p className="text-muted-foreground text-sm sm:text-base">
              Select a chat from the sidebar to get started, or create a new
              conversation to begin analyzing your transcripts.
            </p>
          </div>
        </div>
      </div>
    );
  }

  if (!hasMessages) {
    return (
      <div className="flex-1 flex items-center justify-center p-4">
        <div className="text-center space-y-6 p-4 sm:p-8 max-w-sm mx-auto">
          <div className="w-14 h-14 sm:w-16 sm:h-16 mx-auto bg-gradient-to-br from-blue-500/20 to-blue-500/5 rounded-2xl flex items-center justify-center">
            <Send className="h-7 w-7 sm:h-8 sm:w-8 text-blue-500" />
          </div>
          <div className="space-y-2">
            <h3 className="text-lg sm:text-xl font-semibold">
              Start the conversation
            </h3>
            <p className="text-muted-foreground text-sm sm:text-base">
              Ask a question about your transcripts to begin the analysis.
            </p>
          </div>
        </div>
      </div>
    );
  }

  return null;
}