import React from "react";
import { Type } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Card } from "@/components/ui/card";

export default function TextInput({ text, onChange, placeholder = "Gib deinen Text ein:" }) {
  return (
    <Card className="bg-white/10 backdrop-blur-lg border border-white/20 p-6 mb-8">
      <div className="flex items-center gap-3 mb-4">
        <Type className="w-5 h-5 text-white" />
        <h2 className="text-lg font-semibold text-white">{placeholder}</h2>
      </div>
      <Input
        value={text}
        onChange={(e) => onChange(e.target.value)}
        placeholder="Hallo Instagram!"
        className="bg-white/20 border-white/30 text-white placeholder:text-white/60 text-lg py-6 px-4 rounded-xl focus:bg-white/30 transition-all duration-300"
      />
    </Card>
  );
}