"use client";

import React, { useState } from "react";
import Button from "@/app/ui/Button";

type UrlTabProps = {
  onLoadCalendar: (url: string) => Promise<void>;
  loading: boolean;
  error: string | null;
  className?: string;
};

const UrlTab: React.FC<UrlTabProps> = ({ onLoadCalendar, loading, error, className = "" }) => {
  const [url, setUrl] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (url.trim()) {
      await onLoadCalendar(url.trim());
    }
  };

  return (
    <div className={`p-4 ${className}`}>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label htmlFor="calendar-url" className="block text-sm font-medium text-gray-700 dark:text-[#F4F1EA]/80 mb-1">
            Calendar URL
          </label>
          <input
            id="calendar-url"
            type="url"
            value={url}
            onChange={(e) => setUrl(e.target.value)}
            placeholder="https://example.com/calendar.ics"
            className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-[#B23CFF] focus:border-[#B23CFF] dark:bg-white/5 dark:border-white/10 dark:text-[#F4F1EA]"
            required
          />
        </div>
        {error && (
          <div role="alert" className="text-[#FF2D8D] text-sm">
            {error}
          </div>
        )}
        <Button type="submit" disabled={loading}>
          {loading ? <>Load Calendar</> : <>Load Calendar</>}
        </Button>
      </form>
    </div>
  );
};

export default UrlTab;