import Image from "next/image"

import Link from "next/link"

import { Youtube, ThumbsUp, ThumbsDown, Share2, Download, MoreHorizontal } from
'lucide-react'

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"

export default function Component() {

return (
<div className="flex flex-col min-h-screen bg-background">
<header className="sticky top-0 z-50 w-full border-b bg-background/95
backdrop-blur supports-[backdrop-filter]:bg-background/60">
<div className="container flex h-14 items-center">
<div className="flex items-center space-x-4">
<Link href="#">
<Youtube className="h-6 w-6 text-red-500" />
<span className="sr-only">YouTube</span>
</Link>
</div>
<div className="flex flex-1 items-center space-x-2 sm:space-x-4 justify-
center">
<form className="w-full max-w-2xl">
<Input className="w-full" placeholder="Search" type="search" />
</form>
</div>
<div className="flex items-center space-x-4">
<Avatar>
<AvatarImage src="/placeholder-user.jpg" alt="@user" />
<AvatarFallback>U</AvatarFallback>
</Avatar>
</div>
</div>
</header>
<main className="flex-1">
<div className="container grid gap-12 md:grid-cols-[1fr_300px] py-8">
<div className="space-y-4">
<div className="rounded-lg overflow-hidden">
<video
className="w-full aspect-video"
src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
controls
/>
</div>
<h1 className="text-2xl font-bold">Never Gonna Give You Up - Rick
Astley</h1>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2">
<Avatar>
<AvatarImage src="/placeholder-user.jpg" alt="@rickastley" />
<AvatarFallback>RA</AvatarFallback>
</Avatar>
<div>
<p className="font-semibold">Rick Astley</p>
<p className="text-sm text-muted-foreground">1.3M subscribers</p>
</div>
</div>
 <div className="flex items-center space-x-2">
<Button variant="secondary" size="sm">
<ThumbsUp className="w-4 h-4 mr-2" />
1.2M
</Button>
<Button variant="secondary" size="sm">
<ThumbsDown className="w-4 h-4 mr-2" />
4.3K
</Button>
<Button variant="secondary" size="sm">
<Share2 className="w-4 h-4 mr-2" />
Share
</Button>
<Button variant="secondary" size="sm">
<Download className="w-4 h-4 mr-2" />
Download
</Button>
<Button variant="ghost" size="icon">
<MoreHorizontal className="w-4 h-4" />
<span className="sr-only">More</span>
</Button>
</div>
</div>
<Separator />
<div className="text-sm">
<p>1,234,567 views • Oct 25, 2009</p>
<p className="mt-2">
Rick Astley's official music video for "Never Gonna Give You Up"
Listen to Rick Astley:
https://RickAstley.lnk.to/_listenYD Subscribe to the official Rick
Astley YouTube channel:
https://RickAstley.lnk.to/subscribeYD Follow Rick Astley: Facebook:
https://RickAstley.lnk.to/followFI
Twitter: https://RickAstley.lnk.to/followTI Instagram:
https://RickAstley.lnk.to/followII Website:
https://RickAstley.lnk.to/followWI Spotify:
https://RickAstley.lnk.to/followSI Lyrics: Never gonna give
you up Never gonna let you down Never gonna run around and desert
you Never gonna make you cry Never
gonna say goodbye Never gonna tell a lie and hurt you #RickAstley
#NeverGonnaGiveYouUp #OfficialMusicVideo
</p>
</div>
<Separator />
<div className="space-y-4">
<h2 className="text-xl font-semibold">Comments</h2>
<div className="flex items-start space-x-4">
<Avatar>
<AvatarImage src="/placeholder-user.jpg" alt="@user" />
<AvatarFallback>U</AvatarFallback>
</Avatar>
<div className="space-y-2 flex-1">
<p className="font-semibold">@user</p>
<p>This song never gets old! 🎵</p>
<div className="flex items-center space-x-2">
<Button variant="ghost" size="sm">
<ThumbsUp className="w-4 h-4 mr-2" />
1.2K
</Button>
 <Button variant="ghost" size="sm">
<ThumbsDown className="w-4 h-4" />
</Button>
<Button variant="ghost" size="sm">
Reply
</Button>
</div>
</div>
</div>
</div>
</div>
<div className="space-y-4">
<h2 className="text-xl font-semibold">Recommended videos</h2>
{Array.from({ length: 5 }).map((_, i) => (
<div key={i} className="flex space-x-4">
<Image
alt="Video thumbnail"
className="rounded-lg object-cover"
height="94"
src="/placeholder.svg"
style={{
aspectRatio: "168/94",
objectFit: "cover",
}}
width="168"
/>
<div className="space-y-1">
<h3 className="font-medium leading-none">Video Title</h3>
<p className="text-xs text-muted-foreground">Channel Name</p>
<p className="text-xs text-muted-foreground">1M views • 1 year
ago</p>
</div>
</div>
))}
</div>
</div>
</main>
</div>
)
}