aplp.frontend.lms/src/pages/Course/CourseDetails.jsx

import {
  Card,
  Button,
  Typography,
  TextField,
  Input,
  Label,
  Chip,
  TextArea
} from '@heroui/react';
import PageHeader from '../../components/PageHeader';
import { useParams } from 'react-router-dom';

const data = [
  {
    code: 'LDR-101',
    title: 'Foundations of Modern Leadership',
    description:
      'An introductory course covering essential leadership principles for new managers.',
    status: 'Active',
    lastUpdate: '2026-08-19',
    image:
      'https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=800&q=80'
  },
  {
    code: 'TEC-204',
    title: 'Advanced Cloud Architecture Patterns',
    description:
      'Deep dive into scalable cloud infrastructure design and implementation strategies.',
    status: 'Inactive',
    lastUpdate: '2026-08-19',
    image:
      'https://images.unsplash.com/photo-1533090161767-e6ffed986c88?auto=format&fit=crop&w=800&q=80'
  },
  {
    code: 'CMP-099',
    title: '2022 Annual Compliance Review',
    description: 'Outdated compliance materials from the previous fiscal year.',
    status: 'Inactive',
    lastUpdate: '2026-08-19',
    image:
      'https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=800&q=80'
  }
];

function CourseDetail() {
  const { courseId } = useParams();
  const course = data.find((e) => e.code === courseId);

  if (!course) {
    return <div>Course not found</div>;
  }
  return (
    <>
      <PageHeader />
      <div className="mb-4 flex flex-row items-center justify-between">
        <Typography className="font-bold">{course?.title}</Typography>
        <div className="flex flex-row item-center gap-2">
          <Button variant="outline" className="rounded-lg">
            Inactivate
          </Button>
          <Button className="rounded-lg">Publish</Button>
        </div>
      </div>
      <div>
        <Card
          variant="default"
          className="w-full max-w-100 overflow-hidden rounded-lg border border-gray-300 bg-white shadow-none"
        >
          <Card.Header>
            <Typography className="font-medium">Course Details</Typography>
          </Card.Header>
          <Card.Content>
            <TextField
              className="w-full max-w-64 my-2"
              name="Course Code"
              type="text"
            >
              <Label>Course Code</Label>
              <Input
                className="rounded border border-gray-300"
                value={course?.code}
              />
            </TextField>
            <Label>Status</Label>
            {course?.status === 'Active' ? (
              <Chip color="success" variant="primary">
                Active
              </Chip>
            ) : (
              <Chip>Inactive</Chip>
            )}
            <TextField
              className="w-full max-w-64 my-2"
              name="Description"
              type="text"
            >
              <Label>Description</Label>
              <TextArea
                className="max-h-50"
                placeholder="..."
                rows={4}
                value={course?.description}
              />
            </TextField>
          </Card.Content>
          <Card.Footer />
        </Card>
      </div>
    </>
  );
}

export default CourseDetail;