import { FileSpreadsheet } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

export function GoogleSheetsCard() {
  return (
    <div className="metric-card space-y-4 opacity-60">
      <div className="flex items-center gap-3">
        <div className="w-12 h-12 rounded-xl bg-muted flex items-center justify-center">
          <FileSpreadsheet className="w-6 h-6 text-muted-foreground" />
        </div>
        <div className="flex-1">
          <div className="flex items-center gap-2">
            <h3 className="text-foreground font-medium">Google Sheets</h3>
            <span className="text-xs bg-muted text-muted-foreground px-2 py-0.5 rounded-full">
              Em breve
            </span>
          </div>
          <p className="text-muted-foreground text-sm">Gerencie planilhas e dados</p>
        </div>
      </div>

      <div className="space-y-3 pointer-events-none">
        <div>
          <label className="text-sm text-muted-foreground mb-1.5 block">
            Client ID
          </label>
          <Input
            type="text"
            disabled
            placeholder="Insira o Client ID"
            className="bg-card border-border"
          />
        </div>

        <div>
          <label className="text-sm text-muted-foreground mb-1.5 block">
            Client Secret
          </label>
          <Input
            type="password"
            disabled
            placeholder="Insira o Client Secret"
            className="bg-card border-border"
          />
        </div>

        <div>
          <label className="text-sm text-muted-foreground mb-1.5 block">
            Link da Planilha
          </label>
          <Input
            type="text"
            disabled
            placeholder="Cole o link da planilha aqui"
            className="bg-card border-border"
          />
        </div>
      </div>

      <div className="flex items-center gap-2 pt-2">
        <Button
          size="sm"
          disabled
          className="bg-primary text-primary-foreground hover:bg-primary/90"
        >
          Salvar
        </Button>
      </div>
    </div>
  );
}