// App.jsx
import React from "react";
import { Button } from "shadcn-ui"; // UI kütüphanesi kullanımı
import "./index.css";

const ProfileCard = ({ username, level, avatar }) => (
  <div className="bg-gray-900 p-6 rounded-2xl shadow-xl max-w-sm mx-auto text-white">
    <img src={avatar} alt="Avatar" className="w-24 h-24 rounded-full mx-auto mb-4" />
    <h2 className="text-2xl font-bold text-center">{username}</h2>
    <p className="text-center text-gray-400">Level {level}</p>
    <Button className="mt-4 w-full">Start Coaching</Button>
  </div>
);

export default function App() {
  return (
    <div className="min-h-screen bg-black flex flex-col items-center justify-center space-y-12">
      {/* Landing */}
      <div className="text-center text-green-400 font-mono animate-pulse">
        <h1 className="text-5xl mb-4">Welcome to Flex For Rage</h1>
        <p>Next-level gaming experience.</p>
      </div>

      {/* Profile */}
      <ProfileCard 
        username="Rexevl" 
        level={42} 
        avatar="https://i.pravatar.cc/150" 
      />

      {/* Media */}
      <div className="space-y-4 text-center">
        <audio controls className="w-full">
          <source src="sample.mp3" type="audio/mpeg" />
        </audio>
        <video controls className="w-full max-w-lg rounded-xl">
          <source src="sample.mp4" type="video/mp4" />
        </video>
      </div>

      {/* Socials */}
      <div className="flex space-x-6 text-white text-xl">
        <a href="https://instagram.com/friend" target="_blank" rel="noopener noreferrer">Instagram</a>
        <a href="https://discord.com/" target="_blank" rel="noopener noreferrer">Discord</a>
      </div>
    </div>
  );
}