Tweet Carousel

import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { ChevronLeft, ChevronRight, MessageCircle, Repeat2, Heart, ExternalLink, VerifiedIcon } from 'lucide-react';
import { Twitter } from '@/components/ui/brand-icons';

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  type CarouselApi,
} from '@/components/ui/carousel';
import { useState } from 'react';

// Sample tweets data
const tweets = [
  {
    id: '1',
    user: {
      name: 'Alex Morgan',
      handle: '@alexmdev',
      avatar:
        'https://images.unsplash.com/photo-1568602471122-7832951cc4c5?q=80&w=1170&auto=format&fit=crop',
      verified: true,
    },
    content:
      'Just launched my new portfolio website built with Next.js and Tailwind CSS! Check it out and let me know what you think. #webdev #frontend #portfoliowebsite',
    date: '2h ago',
    metrics: {
      replies: 12,
      retweets: 24,
      likes: 89,
    },
    url: '#',
  },
  {
    id: '2',
    user: {
      name: 'Sarah Johnson',
      handle: '@sarahj_ux',
      avatar:
        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1287&auto=format&fit=crop',
      verified: true,
    },
    content:
      "Had the pleasure of working with @alexmdev on our company's website redesign. His technical skills and eye for design are exceptional! Highly recommend for any web development project. 💯",
    date: '1d ago',
    metrics: {
      replies: 3,
      retweets: 15,
      likes: 67,
    },
    url: '#',
  },
  {
    id: '3',
    user: {
      name: 'Tech Insights',
      handle: '@techinsights',
      avatar:
        'https://images.unsplash.com/photo-1628155930542-3c7a64e2c833?q=80&w=1074&auto=format&fit=crop',
      verified: true,
    },
    content:
      'We interviewed @alexmdev about his approach to modern web development in our latest podcast episode. Great insights on balancing performance and aesthetics! Listen now: techinsights.com/podcast/ep45',
    date: '3d ago',
    metrics: {
      replies: 18,
      retweets: 42,
      likes: 136,
    },
    url: '#',
  },
  {
    id: '4',
    user: {
      name: 'Alex Morgan',
      handle: '@alexmdev',
      avatar:
        'https://images.unsplash.com/photo-1568602471122-7832951cc4c5?q=80&w=1170&auto=format&fit=crop',
      verified: true,
    },
    content:
      "Excited to announce that I'm joining @innovatetech as a Senior Frontend Developer next month! Looking forward to building amazing web experiences with this talented team. #careerchange #frontenddeveloper",
    date: '5d ago',
    metrics: {
      replies: 32,
      retweets: 18,
      likes: 215,
    },
    url: '#',
  },
  {
    id: '5',
    user: {
      name: 'WebDevConf',
      handle: '@webdevconf',
      avatar:
        'https://images.unsplash.com/photo-1540575467063-178a50c2df87?q=80&w=1170&auto=format&fit=crop',
      verified: true,
    },
    content:
      "Thank you @alexmdev for your insightful presentation on 'Building Accessible Web Applications' at #WebDevConf2023! Attendees loved the practical demonstrations and code examples.",
    date: '1w ago',
    metrics: {
      replies: 8,
      retweets: 27,
      likes: 103,
    },
    url: '#',
  },
  {
    id: '6',
    user: {
      name: 'CodeMentor',
      handle: '@codementor',
      avatar:
        'https://images.unsplash.com/photo-1521119989659-a83eee488004?q=80&w=1123&auto=format&fit=crop',
      verified: false,
    },
    content:
      "Our latest 'Developer Spotlight' features @alexmdev and his journey from self-taught programmer to senior developer. Read about his learning strategies and career tips: codementor.io/spotlight/alex-morgan",
    date: '2w ago',
    metrics: {
      replies: 5,
      retweets: 14,
      likes: 76,
    },
    url: '#',
  },
];

export default function TweetCarousel() {
  const [api, setApi] = useState<CarouselApi>();

  return (
    <div className="bg-background py-16 md:py-24">
      <div className="container mx-auto px-4 2xl:max-w-[1400px]">
        <div className="mb-10 text-center">
          <div className="mb-3 inline-flex items-center gap-2">
            <Twitter className="h-5 w-5 text-sky-500" />
            <Badge
              variant="outline"
              className="border-sky-200 bg-sky-50 px-3 py-1 text-xs font-medium tracking-wide text-sky-600 uppercase dark:border-sky-500/20 dark:bg-sky-500/10 dark:text-sky-400"
            >
              Twitter
            </Badge>
          </div>
          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
            Latest Tweets
          </h2>
          <p className="text-muted-foreground mx-auto mt-4 max-w-2xl">
            Stay updated with my latest thoughts and interactions in the tech
            community
          </p>
        </div>

        {/* Tweet Carousel with Navigation */}
        <div className="relative">
          <Carousel
            opts={{
              align: 'start',
              loop: true,
            }}
            className="w-full"
            setApi={setApi}
          >
            <CarouselContent className="pt-2 pb-6">
              {tweets.map((tweet) => (
                <CarouselItem
                  key={tweet.id}
                  className="md:basis-1/2 lg:basis-1/3"
                >
                  <Card className="h-full border shadow-sm transition-all hover:shadow-md">
                    <CardContent className="flex h-full flex-col">
                      {/* Tweet Header */}
                      <div className="mb-4 flex items-start justify-between">
                        <div className="flex items-center gap-3">
                          <div className="relative h-10 w-10 overflow-hidden rounded-full">
                            <img
                              src={tweet.user.avatar}
                              alt={tweet.user.name}
                              className="object-cover"
                            />
                          </div>
                          <div>
                            <div className="flex items-center gap-1">
                              <span className="text-sm font-semibold">
                                {tweet.user.name}
                              </span>
                              {tweet.user.verified && (
                                <VerifiedIcon
                                  className="h-3.5 w-3.5 text-sky-500"
                                  fill="#0ea5e9"
                                />
                              )}
                            </div>
                            <div className="text-muted-foreground text-xs">
                              {tweet.user.handle}
                            </div>
                          </div>
                        </div>
                        <Twitter className="h-5 w-5 text-sky-500" />
                      </div>

                      {/* Tweet Content */}
                      <p className="mb-4 grow text-sm">{tweet.content}</p>

                      {/* Tweet Date and Metrics */}
                      <div className="border-t pt-4">
                        <div className="text-muted-foreground mb-2 text-xs">
                          {tweet.date}
                        </div>
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-4">
                            <div className="text-muted-foreground flex items-center gap-1 hover:text-sky-500">
                              <MessageCircle className="h-4 w-4" />
                              <span className="text-xs">
                                {tweet.metrics.replies}
                              </span>
                            </div>
                            <div className="text-muted-foreground flex items-center gap-1 hover:text-green-500">
                              <Repeat2 className="h-4 w-4" />
                              <span className="text-xs">
                                {tweet.metrics.retweets}
                              </span>
                            </div>
                            <div className="text-muted-foreground flex items-center gap-1 hover:text-red-500">
                              <Heart className="h-4 w-4" />
                              <span className="text-xs">
                                {tweet.metrics.likes}
                              </span>
                            </div>
                          </div>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8 rounded-full hover:bg-sky-50 hover:text-sky-500 dark:hover:bg-sky-950/50"
                            asChild
                          >
                            <a
                              href={tweet.url}
                              target="_blank"
                              rel="noopener noreferrer"
                            >
                              <ExternalLink className="h-4 w-4" />
                            </a>
                          </Button>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </CarouselItem>
              ))}
            </CarouselContent>
          </Carousel>
        </div>

        {/* Footer with Mobile Navigation and Link */}
        <div className="flex flex-col items-center space-y-6">
          <div className="flex items-center justify-center gap-4">
            <Button
              variant="outline"
              size="sm"
              className="h-9 w-9 rounded-full p-0"
              onClick={() => api?.scrollPrev()}
            >
              <ChevronLeft className="h-5 w-5" />
            </Button>
            <Button
              variant="outline"
              size="sm"
              className="h-9 w-9 rounded-full p-0"
              onClick={() => api?.scrollNext()}
            >
              <ChevronRight className="h-5 w-5" />
            </Button>
          </div>

          <Button
            variant="outline"
            className="gap-2 border-sky-200 hover:bg-sky-50 hover:text-sky-600 dark:border-sky-500/20 dark:hover:bg-sky-950/30 dark:hover:text-sky-400"
            asChild
          >
            <a href="#" target="_blank" rel="noopener noreferrer">
              <Twitter className="h-4 w-4" />
              <span>Follow me on Twitter</span>
            </a>
          </Button>
        </div>
      </div>
    </div>
  );
}