import { ArrowRight, Github } from 'lucide-react';
import { motion } from 'framer-motion';

export default function RepoInputForm({ value, onChange, onSubmit, examples = [] }) {
  return (
    <div className="enterprise-panel rounded-lg p-6 md:p-8">
      <label className="mb-2 block text-sm font-medium text-slate-300">GitHub Repository URL</label>
      <div className="flex flex-col gap-3 md:flex-row">
        <div className="glass flex flex-1 items-center gap-3 rounded-lg px-4 py-3 focus-within:border-cyan-400/50">
          <Github className="h-5 w-5 flex-shrink-0 text-slate-500" />
          <input
            value={value}
            onChange={(event) => onChange(event.target.value)}
            onKeyDown={(event) => event.key === 'Enter' && onSubmit()}
            placeholder="https://github.com/owner/repository"
            className="w-full bg-transparent font-mono text-sm text-slate-200 outline-none placeholder:text-slate-600"
          />
        </div>
        <motion.button
          whileTap={{ scale: 0.98 }}
          onClick={onSubmit}
          className="inline-flex items-center justify-center gap-2 rounded-lg bg-cyan-500 px-5 py-3 font-semibold text-slate-950 transition-colors hover:bg-cyan-300"
        >
          Analyze <ArrowRight className="h-4 w-4" />
        </motion.button>
      </div>

      <div className="mt-6">
        <p className="mb-3 text-xs uppercase tracking-[0.18em] text-slate-600">Example Repositories</p>
        <div className="grid gap-2 sm:grid-cols-2">
          {examples.map((repo) => (
            <button
              key={repo}
              onClick={() => onChange(repo)}
              className="rounded-lg border border-white/8 bg-white/[0.03] px-3 py-2 text-left font-mono text-xs text-slate-400 transition-colors hover:border-cyan-400/30 hover:text-slate-100"
            >
              {repo.split('/').slice(-2).join('/')}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}