/* Kennedy Grace — Videos grid screen (mirrors the CoverStar feed) */

const { Badge, Chip, ChipGroup } = window.KennedyGraceDesignSystem_5322af;

function VideosScreen() {
  const { PhotoTile, SectionTitle } = window;
  const [filter, setFilter] = React.useState('recent');

  const vids = [
    { emoji: '🏖️', grad: 'var(--grad-mint-sky)', tag: 'vlog', views: '10.6K', title: 'Giveaway ends tonight!' },
    { emoji: '👗', grad: 'var(--grad-cotton)', tag: 'haul', views: '17.4K', title: 'Sephora haul!!' },
    { emoji: '🍹', grad: 'var(--grad-candy)', tag: 'vlog', views: '15.8K', title: 'Fishbowl drinks with us!' },
    { emoji: '💅', grad: 'linear-gradient(135deg,#FF98C2,#FFB04F)', tag: 'grwm', views: '13.1K', title: 'Self care night!' },
    { emoji: '🎯', grad: 'var(--grad-mint-sky)', tag: 'haul', views: '27.6K', title: 'Target haul!!!!' },
    { emoji: '🏝️', grad: 'linear-gradient(135deg,#5FE0C6,#7FCDF5)', tag: 'vlog', views: '5.3K', title: 'Driftwood beach!' },
    { emoji: '🛼', grad: 'var(--grad-cotton)', tag: 'grwm', views: '11.4K', title: 'GRWM for the day' },
    { emoji: '🧋', grad: 'var(--grad-candy)', tag: 'haul', views: '9.5K', title: 'Open dumplings with me!' },
  ];

  return (
    <div style={{ padding: '16px 16px 24px' }}>
      <SectionTitle accent="🎬">My videos</SectionTitle>

      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}>
        <ChipGroup>
          <Chip active={filter === 'recent'} onClick={() => setFilter('recent')}>recent</Chip>
          <Chip active={filter === 'popular'} onClick={() => setFilter('popular')}>popular</Chip>
        </ChipGroup>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {vids.map((v, i) => (
          <PhotoTile key={i} emoji={v.emoji} grad={v.grad} ratio="3 / 4"
            badge={<Badge tone={v.tag}>{v.tag.toUpperCase()}</Badge>} views={v.views} />
        ))}
      </div>
    </div>
  );
}

window.VideosScreen = VideosScreen;