"use client";

import React, { useState } from 'react';
import styles from './Hero.module.css';
import { Sparkles } from 'lucide-react';

const HeroClient = () => {
    const [inputValue, setInputValue] = React.useState("");
    const [error, setError] = React.useState("");

    const validateDomain = (domain: string) => {
        const regex = /^[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.[a-zA-Z]{2,}$/;
        if (!regex.test(domain)) {
            setError("Invalid domain format (e.g., example.com)");
            return false;
        }
        setError("");
        return true;
    };

    const handleSearch = () => {
        if (validateDomain(inputValue)) {
            alert(`Searching for ${inputValue}...`);
        }
    };

    return (
        <div className={styles.domainSearchContainer}>
            <div className={`${styles.searchWrapper} ${error ? styles.errorInput : ''}`}>
                <input
                    type="text"
                    placeholder="Enter your dream domain name..."
                    className={styles.domainInput}
                    value={inputValue}
                    onChange={(e) => {
                        setInputValue(e.target.value);
                        if (error) setError("");
                    }}
                />
                <button className={styles.domainBtn} onClick={handleSearch}>
                    <Sparkles size={16} /> Search Now
                </button>
            </div>
            {error && <div className={styles.errorMessage}>{error}</div>}
            <div className={styles.searchTags}>
                <span>Popular:</span>
                <span className={styles.tag}>.com</span>
                <span className={styles.tag}>.net</span>
                <span className={styles.tag}>.org</span>
                <span className={styles.tag}>.io</span>
                <span className={styles.tag}>.co</span>
                <span className={styles.tag}>.site</span>
                <span className={styles.tag}>.xyz</span>
            </div>
        </div>
    );
};

export default HeroClient;